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 相关文章推荐
Jquery取得iframe下内容的方法
Nov 18 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 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
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
php使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
php实现微信模板消息推送
2018/03/30 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
详解JavaScript中的Object.is()与"==="运算符总结
2020/06/17 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
对python周期性定时器的示例详解
2019/02/19 Python
python写日志文件操作类与应用示例
2019/07/01 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
大学生最常用的自我评价
2013/12/07 职场文书
管理失职检讨书
2014/02/12 职场文书
工程项目建议书范文
2014/03/12 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
家庭经济困难证明
2015/06/23 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis