|
vue获取div节点，默认设置滚动到底部
前言
最近在做一个简单的聊天窗口，技术栈采用的是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方法介绍
|