html 自动滚动到底部,原生js使dom自动滚动到最底部

要实现一个聊天发言自动滚到底部的功能。直接上代码

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。所以每次滚动的高度都是没插入数据时

这里我加了个异步定时器，就解决了这个问题。

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);

}