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

网络编程 2024/12/23 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

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

这个和聊天发消息还有一定的区别，聊天的话是只要点开输入框，就将内容定位到最下面：即 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"color: #ff0000">总结

vue编辑器键盘抬起,vue编辑器,vue内容跟随光标向上滚动

标签：

vue编辑器键盘抬起,vue编辑器,vue内容跟随光标向上滚动

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

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

暂无vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果的评论...

更新日志

2024年12月23日

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

vue编辑器键盘抬起,vue编辑器,vue内容跟随光标向上滚动

JavaScript隐式类型转换代码实例

node+vue实现文件上传功能

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

更新日志

友情链接