Vue实现渲染数据后控制滚动条位置(推荐)


Posted in Javascript onDecember 09, 2019

需求场景如下:

实现了消息发送,如果容器内消息过多,会出现滚动条,最新的消息位于最底部,不能及时出现在可视区域内,此时就需要在渲染列表后,将滚动条的位置定位到最底部。先来看看最终实现的效果

Vue实现渲染数据后控制滚动条位置(推荐)  

实现思路

  • 渲染完数据后,通过refs对象获取消息容器的实际高度
  • 将滚动条的设置到最底部

实现过程

sendMessage: function (event) {
  // 数据渲染
  this.senderMessageList.push(thisSenderMessageObj);
  // 改变滚动条位置
  this.messagesContainerTimer = setTimeout(()=>{
    this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
    console.log("当前滚动条位置:"+this.$refs.messagesContainer.scrollTop);
    console.log("当前可滚动区域容器的高度:"+this.$refs.messagesContainer.scrollHeight);
    // 清理定时器
    clearTimeout(this.messagesContainerTimer);
  },0);
}

踩坑记录

直接设置滚动条的位置

数据渲染完成后直接获取元素的真实高度,设置滚动条的位置,讲道理好像没什么毛病,结果滚动条的高度没有预想的渲染。问题原因:数据渲染完成后,Vue此时还没有渲染DOM元素,设置的滚动条高度还是之前的容器高度。

sendMessage: function (event) {
  // 数据渲染
  this.senderMessageList.push(thisSenderMessageObj);
  // 改变滚动条位置
  this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
  console.log("当前滚动条位置:"+this.$refs.messagesContainer.scrollTop);
  console.log("当前可滚动区域容器的高度:"+this.$refs.messagesContainer.scrollHeight);
}

Vue实现渲染数据后控制滚动条位置(推荐)

正确的改变方式: 使用setTimeout(),将DOM操作改为异步。

this.messagesContainerTimer = setTimeout(()=>{
  this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
  console.log("当前滚动条位置:"+this.$refs.messagesContainer.scrollTop);
  console.log("当前可滚动区域容器的高度:"+this.$refs.messagesContainer.scrollHeight);
  // 清理定时器
  clearTimeout(this.messagesContainerTimer);
},0);

总结

以上所述是小编给大家介绍的Vue实现渲染数据后控制滚动条位置,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
关于URL中的特殊符号使用介绍
Nov 03 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
javascript实现图片循环渐显播放的方法
Feb 24 Javascript
基于jQuery的ajax方法封装
Jul 14 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
vue生命周期实例小结
Aug 15 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 #Javascript
js刷新页面location.reload()用法详解
Dec 09 #Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 #Javascript
Vue extend的基本用法(实例详解)
Dec 09 #Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 #Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 #Javascript
vue如何使用async、await实现同步请求
Dec 09 #Javascript
You might like
农民和部队如何穿矿
2020/03/04 星际争霸
Cakephp 执行主要流程
2010/03/24 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
List Installed Hot Fixes
2007/06/12 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
Python中的引用和拷贝浅析
2014/11/22 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
PyQt5实现简易电子词典
2019/06/25 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
使用Python构造hive insert语句说明
2020/06/06 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
python实现计算图形面积
2021/02/22 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
高中校园广播稿
2014/01/11 职场文书
英语专业个人求职信范文
2014/02/01 职场文书
质量承诺书格式
2014/05/20 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
兵马俑导游词
2015/02/02 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript