Copy scrollTop value from textarea to div

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);
};

Answer

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.