要实现一个聊天发言自动滚到底部的功能。直接上代码
var ele = document.getElementById('id');
ele.scrollTop = ele.scrollHeight;
获取到对应的dom,设置dom的scrollTop为元素的scrollHeight即可.
但我这里有一个问题,用的是vue。就是每次Push进数组数据,然后滚动,总是少一条数据的高度。
sendMsg() {
this.roomMsgList.push({ name: "新评论", identity: "", msg: this.msg });
this.msg = "";
this.msgIcon = true;
let ele = document.getElementById("msgList");
ele.scrollTop = ele.scrollHeight;
},
这里我怀疑是同步和异步的问题,总是执行完这个sendMsg()方法才更新Ui。所以每次滚动的高度都是没插入数据时<ul></ul>的高度。
这里我加了个异步定时器,就解决了这个问题。
sendMsg() {
this.roomMsgList.push({ name: "新评论", identity: "", msg: this.msg });
this.msg = "";
this.msgIcon = true;
setTimeout(() => {
let ele = document.getElementById("msgList");
console.log(ele.scrollHeight);
ele.scrollTop = ele.scrollHeight;
}, 0);
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。