Vue实现渲染数据后控制滚动条位置（推荐）
需求场景如下:
实现了消息发送，如果容器内消息过多，会出现滚动条，最新的消息位于最底部，不能及时出现在可视区域内，此时就需要在渲染列表后，将滚动条的位置定位到最底部。先来看看最终实现的效果
实现思路
渲染完数据后，通过refs对象获取消息容器的实际⾼度
将滚动条的设置到最底部
实现过程
sendMessage: function (event) {
// 数据渲染
this.senderMessageList.push(thisSenderMessageObj);
// 改变滚动条位置
this.$ssagesContainer.scrollTop = this.$ssagesContainer.scrollHeight;
console.log("当前滚动条位置:"+this.$ssagesContainer.scrollTop);
console.log("当前可滚动区域容器的⾼度:"+this.$ssagesContainer.scrollHeight);
js控制滚动条// 清理定时器
ssagesContainerTimer);
},0);
}
踩坑记录
直接设置滚动条的位置
数据渲染完成后直接获取元素的真实⾼度，设置滚动条的位置，讲道理好像没什么⽑病，结果滚动条的⾼度没有预想的渲染。问题原因：数据渲染完成后，Vue此时还没有渲染DOM元素，设置的滚动条⾼度还是之前的容器⾼度。
sendMessage: function (event) {
// 数据渲染
this.senderMessageList.push(thisSenderMessageObj);
// 改变滚动条位置
this.$ssagesContainer.scrollTop = this.$ssagesContainer.scrollHeight;
console.log("当前滚动条位置:"+this.$ssagesContainer.scrollTop);
console.log("当前可滚动区域容器的⾼度:"+this.$ssagesContainer.scrollHeight);
}
正确的改变⽅式: 使⽤setTimeout()，将DOM操作改为异步。
this.$ssagesContainer.scrollTop = this.$ssagesContainer.scrollHeight;
console.log("当前滚动条位置:"+this.$ssagesContainer.scrollTop);
console.log("当前可滚动区域容器的⾼度:"+this.$ssagesContainer.scrollHeight);
/
/ 清理定时器
ssagesContainerTimer);
},0);
总结
以上所述是⼩编给⼤家介绍的Vue实现渲染数据后控制滚动条位置，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。