javascript - 将 scrollTop 值从 textarea 复制到 div

Question

我在父 div 中有一个 div 和一个 textarea。我试图将 textarea 的 scrollTop 值复制到 div 以便它与 textarea 滚动同步移动。
问题似乎是当我将文本添加到 textarea 然后按 Enter 换行时，div scrollTop 值似乎没有更新，但 textarea scrollTop 值更新了。
如果我再次按下 Enter 键，两个值都会更新，但似乎 div scrollTop 值比 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 1

一种简单的解决方法是删除 setDivScrollTop来自 handleScroll并添加一个新行 \n设置红色div的文本后。请注意，此字符的作用类似于插入符号，并允许它跟随另一个 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"
};

如此处所示， Codesandbox
我还为文本区域元素和 spellCheck={false} 添加了边框样式使人们可以看到它们是平等的。