vue中动态添加数据时控制滚动条在底部_vue实现动态添加数据滚动条⾃动滚动到底部的⽰例代码...
在使⽤vue实现聊天页⾯的时候，聊天数据动态加到页⾯中，需要实现滚动条也⾃动滚动到底部。这时我到⽹上有个插件 vue-chat-scroll
但是安装后发现是⽤不了的，报错信息如下：
VM14383:27 [Vue warn]: Failed to resolve directive: chat-scroll
(found in )
这个⼀直不到原因，可能是我vue的版本是2.2不⽀持吧。。。后来到⼀个解决办法：
添加watch⽅法，监听数据变量的变化，动态添加滚动条，⼀开始我代码如下：
watch: {
chatlog() {
var container = this.$el.querySelector("#chatContainer");
console.log(container);
container.scrollTop = container.scrollHeight;
}
}
但是发现滚动条都是滚动到倒数第⼆条数据上，所以需要如下代码来解决：
watch: {
chatlog() {
console.log("chatlog change");
this.$nextTick(() => {
var container = this.$el.querySelector("#chatContainer");
console.log(container);
container.scrollTop = container.scrollHeight;
})
// ElementById('chatContainer').scrollTop = ElementById('chatContainer').scrollHeight+150;
}
}
相应在ul中添加⼀个id属性为chatContainer
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持脚本之家。
jquery滚动条滚动到底部

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