将textarea的scrollTop同步到div时出现滞后问题如何解决

• 核心是DOM内容更新与scrollTop赋值的时机错位：当你在textarea输入回车换行时，textarea的内容会先更新，scrollTop随即变化触发scroll事件，但此时和textarea绑定内容的普通div还未完成内容重渲染，它的scrollHeight（可滚动总高度）还没有同步变大。
• 此时你给div设置的scrollTop值超过了div当前的最大可滚动高度，浏览器会自动将赋值修正为div当前的最大可滚动值，相当于本次赋值无效。等到下一次回车触发内容更新时，div才完成上一轮的内容渲染，scrollHeight变大，上一轮的scrollTop才能赋值成功，最终表现为滞后一步。

1. 先保证基础样式一致 #

给两个元素设置完全相同的样式参数，确保相同内容下二者的scrollHeight完全相等：

div, textarea {
  font-size: 14px;
  line-height: 1.5;
  padding: 8px;
  border: 1px solid #ccc;
  width: 300px;
  box-sizing: border-box;
  /* 其他和文本排版相关的样式保持完全一致 */
}

2. 调整scrollTop同步时机 #

不要仅在scroll事件中同步，新增在内容更新完成后的同步逻辑，配合requestAnimationFrame保证DOM渲染完成后再赋值：

// 原有scroll事件逻辑保留，新增内容变更后的同步逻辑
handleInput = () => {
  // 如果你用的是React/Vue等框架，等state更新、DOM重渲染完成后再执行同步
  requestAnimationFrame(() => {
    const textarea = document.querySelector('textarea');
    const syncDiv = textarea.previousElementSibling;
    syncDiv.scrollTop = textarea.scrollTop;
    setDivScrollTop(syncDiv.scrollTop);
  })
}

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

如果是React框架，也可以用useEffect监听textarea绑定的内容state，state变更后执行一次同步逻辑，效果一致。

3. 可选兜底逻辑 #

如果仍有偶发不同步，可以监听两个元素的scrollHeight变化，只要二者不一致就触发一次scrollTop同步。

内容的提问来源于stack exchange，提问作者grimmus