关于模仿知乎富文本编译器，根据光标位置滚动问题. 如何解决？

Question

问题描述:

1. 背景
   我用的wangEditor富文本,富文本高度是根据输入内容高度自适应的,当输入内容很多时,浏览器会出现滚动条(body)
2. 需求.
   现在有这样一个需求, 当富文本输入的内容超出屏幕时,屏幕滚动条需要滚到光标位置,保证光标不超出屏幕.
3. 条件
   只有内容输入过多,超出屏幕,导致光标超出视口,再将滚动条滚到光标位置.让光标展示出来
   在内容超出视口时,滚到上边,在中间插入光标填写内容可以正常添加,滚动条正常滚动
4. 参考
   知乎的写文章 富文本编译器.实现相同的效果
5. 我的解决思路
   富文本有一个change事件,可以在每次输入内容时触发.
   (1) 在change事件中,获取光标所在位置. 和光标距离屏幕顶部的高度.
   (2) 判断 如果光标超出视口, 那么使滚动条的高度 等于 光标距离屏幕顶端的高度
6. 补充
   因页面有两个编译器,可以理解为一个是输入免费的内容,一个是输入付费的内容. 所以对于光标位置,滚动条滚动的位置一定要精确. 我之前实现,滚动的位置总是过大,不够精确. 我的思路不一定正确.具体参考知乎编译器. 谢谢

Answer 1

该回答引用chatgpt:
你的思路基本上是正确的，但有一些细节需要注意。

在每次输入内容时触发 change 事件是可行的，但可能会存在一些输入内容没有触发 change 事件的情况，例如输入特殊字符时。因此建议在 keyup 事件中进行位置的计算。

获取光标位置可以使用 Range 对象，可以通过 window.getSelection() 获取当前选中的 Range 对象，再通过 getBoundingClientRect() 获取 Range 对象在屏幕中的位置。

滚动条的高度应该是相对于富文本容器的，而不是相对于整个文档的。因此需要计算出富文本容器相对于整个文档的位置，再加上光标距离容器顶部的高度，就是滚动条应该滚动的位置了。

下面是代码示例：

// 获取光标相对于富文本容器的位置
function getCaretPosition() {
  const sel = window.getSelection();
  if (sel.rangeCount > 0) {
    const range = sel.getRangeAt(0);
    const rect = range.getBoundingClientRect();
    const containerRect = editor.getBoundingClientRect();
    return rect.top - containerRect.top;
  }
  return 0;
}

// 滚动到光标位置
function scrollToCaret() {
  const scrollTop = getCaretPosition();
  editor.scrollTop = scrollTop;
}

// 在 keyup 事件中触发
editor.addEventListener('keyup', function(event) {
  scrollToCaret();
});

其中，editor 是富文本容器的 DOM 元素。注意，如果富文本容器是在一个有滚动条的元素内部，需要将该元素的滚动条也考虑在内。