当前位置: 首页 > Web前端 > vue.js

原生js让dom自动滚动到底部

时间:2023-03-31 22:11:06 vue.js

实现一个聊天语音自动滚动到底部的功能。直接看代码varele=document.getElementById('id');ele.scrollTop=ele.scrollHeight;获取对应的dom,将dom的scrollTop设置为元素的scrollHeight。但是我这里有一个问题,使用vue.也就是每次推入数组数据然后滚动,总是少了一条数据的高度。sendMsg(){this.roomMsgList.push({name:"新评论",identity:"",msg:this.msg});this.msg="";this.msgIcon=true;让ele=document.getElementById("msgList");ele.scrollTop=ele.scrollHeight;},这里我怀疑是同步异步的问题,Ui总是在sendMsg()方法执行后更新。所以每次滚动的高度就是没有插入数据时

    的高度。这里我加了一个异步定时器来解决这个问题。sendMsg(){this.roomMsgList.push({name:"新评论",identity:"",msg:this.msg});this.msg="";this.msgIcon=true;setTimeout(()=>{letele=document.getElementById("msgList");console.log(ele.scrollHeight);ele.scrollTop=ele.scrollHeight;},0);}