Vue实现渲染数据后控制滚动条位置(推荐)
更新时间：2019年12月09日 15:59:46 作者：神奇的程序员
这篇文章主要介绍了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);
}
正确的改变方式: 使用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实现渲染数据后控制滚动条位置，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
下面小编就为大家分享一篇详谈vue+webpack解决css引用图片打包后找不到资源文件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家介绍了Vue2.0生命周期，思考与理解“el被新创建的vm.$el替换”这句话，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
这篇文章主要介绍了vue项目实现表单登录页保存账号和密码到cookie功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
这篇文章主要介绍了简单了解vue.js数组的常用操作,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了vue中axios的post请求,415错误的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue 实现弹窗关闭后刷新效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue如何截取字符串，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要为大家详细介绍如何在vue中实现PDF文件流预览功能,文中的实现步骤讲解详细,对大家的学习或工作具有一定的参考价值,需要的可以参考一下2023-12-12
这篇文章主要给大家介绍了关于vue如何根据网站路由判断页面主题色的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
Electron也可以快速地将你的网站打包成一个原生应用发布,下面这篇文章主要给大家介绍了关于Vue和React中快速使用Electron的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
最新评论