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方法介绍