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


Posted in Javascript onMay 28, 2020

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

这个和聊天发消息还有一定的区别,聊天的话是只要点开输入框,就将内容定位到最下面: 即 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实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果的文章就介绍到这了,更多相关vue编辑器键盘抬起内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript XML数据显示为HTML一例
Dec 23 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
Apr 23 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
node+vue实现文件上传功能
May 28 #Javascript
vue中实现图片压缩 file文件的方法
May 28 #Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 #Javascript
Vue实现附件上传功能
May 28 #Javascript
如何使用Javascript中的this关键字
May 28 #Javascript
简单了解JavaScript arguement原理及作用
May 28 #Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 #Javascript
You might like
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
PHP中常用的转义函数
2014/02/28 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
Python模块相关知识点小结
2020/03/09 Python
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
苹果Mac升级:MacSales.com
2017/11/20 全球购物
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
函授本科毕业自我鉴定
2013/10/09 职场文书
中专毕业生求职简历的自我评价
2013/10/21 职场文书
最新自我评价范文
2013/11/16 职场文书
给排水工程师岗位职责
2013/11/21 职场文书
医院辞职信范文
2014/01/17 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
大学生个人学习总结
2015/02/15 职场文书
员工家属慰问信
2015/03/24 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
java设计模式--三种工厂模式详解
2021/07/21 Java/Android