vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动

最近遇到了之前没有碰到过的一个问题：编辑器输入内容时，最好让内容一直保持在可视区域，比如如果区域超出的话，就在键盘抬起时向上滚动一定距离。
这个和聊天发消息还有一定的区别，聊天的话是只要点开输入框，就将内容定位到最下面：即 dom.scrollTop = dom.scrollHeight 即可，但是这个需要移动的是一部分距离，经过讨论最好是让当前光标的位置在键盘抬起时达到可视区域的最上面

那么这个距离肯定是根据光标的距离顶部位置决定的，但是光标距离顶部的距离我并没有度到如何获取，于是就自己瞎摸索，就有了接下来的解决办法

原理是利用的是光标属性可以拿到当前基于该属性的 dom 结构，就可以通过当前 dom 距离顶部的 offsetTop 值判断内容本身在键盘抬起时到底向上滚多少

废话不多说，上代码

let sel = window.getSelection(); 获取光标的所有属性

通过打印它的一些属性我们可以拿到一些我们所需要的东西（当前 dom）

console.log(sel.getRangeAt(0).commonAncestorContainer.parentElement)

这个拿到的就是你当前的 dom 元素，只需要拿到它的 offsetTop 即可判断界面到底向上滚动多少

但是有的时候可能当前的属性是个行标签，拿不到offsetTop，那么我们可以找到基于它的父级块标签，我这里的上一级就是块标签，所以只需执行

sel.getRangeAt(0).commonAncestorContainer.parentElement.parentNode.offsetTop

就可以拿到想要的值

再通过

 this.$nextTick(() => {dom.scrollTop = ket;});

这里声明必须在 nextTick 里进行操作才能更改成功，否则是没有效果的

完整 demo

let sel = window.getSelection();
let ket = sel.getRangeAt(0).commonAncestorContainer.parentElement.offsetTop;
if(ket==0){// 行标签
    ket = sel.getRangeAt(0).commonAncestorContainer.parentElement.parentNode.offsetTop
}
 this.$nextTick(() => {dom.scrollTop = ket;});

或者通过三元拿值
let ket = sel.getRangeAt(0).commonAncestorContainer.parentElement.offsetTop==0?sel.getRangeAt(0).commonAncestorContainer.parentElement.parentNode.offsetTop:sel.getRangeAt(0).commonAncestorContainer.parentElement.offsetTop;

 this.$nextTick(() => {dom.scrollTop = ket;});

这样试反正我是成功了，这里说一下键盘抬起不抬起不是我判断是，是由 app 端调用我的方法告知我的，希望小伙伴们不要走弯路 ….