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

42次阅读

共计 675 个字符,预计需要花费 2 分钟才能阅读完成。

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

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

正文完
 0