vue 获取节点，默认滚动到底部

前言

---

最近在做一个简单的聊天窗口，技术栈采用的是 vue+element-ui 需求是每次进入该页面都会默认将滚动条滚动到底部，即显示最新的消息：

如果是整个页面滚动到顶部，写一句代码即可

window.scrollTo(0, 0);

---

获取 DOM 的方法

---

// 方法1
let DOM = this.$el.querySelector(".className");
// 方法2
let newDom = document.getElementsByClassName("className");

设置默认滚动到底部

---

方法 1

setTimeout(() => {
  let container = this.$el.querySelector(".chat_content");
  container.scrollTop = container.scrollHeight;
}, 0);

方法 2

this.$nextTick(() => {
  let container = this.$el.querySelector(".chat_content");
  console.log(container.scrollHeight);
  container.scrollTop = container.scrollHeight;
});

特别注意

**采用上诉两个方法之后，还存在另一个问题，第一次进入时并未滚动到底部，之后才可以**

解决方法

把延时增加即可

setTimeout(() => {
  let container = this.$el.querySelector(".chat_content");
  container.scrollTop = container.scrollHeight;
}, 100);

总结

---

在 vue 中操作 DOM 时经常会遇到先执行了该方法，DOM 并没有更新完成，这时就应该用到延时器或者 vue 中的 nextTick 方法

传送门(推荐阅读)

---

• nextTick 方法介绍