Copy scrollTop value from textarea to div

Question

I have a div and a textarea inside a parent div. I am trying to copy the scrollTop value of the textarea to the div so it moves in sync with the textarea scrolling.

The problem seems to be when i add text into the textarea and then press enter for a new line, the div scrollTop value doesn't seem to update but the textarea scrollTop value does.

If i press enter again both values update but it seems the div scrollTop value is one step behind the textarea

https://codesandbox.io/s/objective-feather-ngq8t

handleScroll = (e) => {
   setTextareaScrollTop(e.target.scrollTop);
   e.target.previousElementSibling.scrollTop = e.target.scrollTop;
   setDivScrollTop(e.target.previousElementSibling.scrollTop);
};

i couldn't reproduce your issue with you code, maybe it's browser dependent, which browser do you use ? Another question, why do you need two `set` call, literally you are using the `setState` call to paint the screen while you don't really care the value change — windmaomao, Oct 11 '21 at 18:55
Thanks, this is just for the code sample I made. I am using chrome latest version on the mac — grimmus, Oct 11 '21 at 19:03
If i remove all the `setState`, i did see the issue you described. But there's no need to that many of `setState`, since you are not using any of the values. I post an answer. — windmaomao, Oct 11 '21 at 19:04

score 1 · Answer 1 · answered Oct 11 '21 at 19:02

I made some mod to your code, https://codesandbox.io/s/empty-voice-7w3ze

const useUpdate = () => {
  const [, dispatch] = useState(0);
  const ref = useRef(() => {
    dispatch((v) => v + 1);
  });

  return ref.current;
};

And when you need to repaint, just do

  handleScroll = (e) => {
    e.target.previousElementSibling.scrollTop = e.target.scrollTop;
    refresh();
  };

I didn't answer your question exactly according to what you want, but i noticed, there's no role the setState plays, so i removed both of them and replaced with a useUpdate. Let me know what you think on this approach.

If i remove both setState you had earlier, i do see the issue you described.

testing_22 · Accepted Answer · 2021-10-11T19:49:01.507

One simple workaround is to remove the setDivScrollTop from the handleScroll and add a new line \n after setting the red div's text. Note that this character acts like a caret and allows it to follow the other div.

handleScroll = (e) => {
    setTextareaScrollTop(e.target.scrollTop);
    e.target.previousElementSibling.scrollTop = e.target.scrollTop;
    // setDivScrollTop(e.target.scrollTop);
};

handleInput = (e) => {
    console.log(divScrollTop, textareaScrollTop)
    setText(e.target.value + "\n"); // add "\n"
};

As seen here, Codesandbox

Also I've added border style to the text area element and spellCheck={false} to make it possible to see they're equal.

Thanks for this, adding in a
to the end of the div has achieved the same and solved a lot of headache for me ! — grimmus, Oct 12 '21 at 08:23

Copy scrollTop value from textarea to div

2 Answers2

Linked