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

小编这次要给大家分享的是vue如何实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获。

创新互联基于分布式IDC数据中心构建的平台为众多户提供绵阳服务器托管 四川大带宽租用 成都机柜租用 成都服务器租用。

最近遇到了之前没有碰到过的一个问题：编辑器输入内容时，最好让内容一直保持在可视区域，比如如果区域超出的话，就在键盘抬起时向上滚动一定距离。

这个和聊天发消息还有一定的区别，聊天的话是只要点开输入框，就将内容定位到最下面： 即 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端调用我的方法告知我的，希望小伙伴们不要走弯路....

看完这篇关于vue如何实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果的文章，如果觉得文章内容写得不错的话，可以把它分享出去给更多人看到。