vue中动态添加数据时控制滚动条在底部_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);

<