scrollIntoView在vue里失效---kalrry

简介

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。

element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数

参数
alignToTop： 一个boolean值
//true：等价于 scrollIntoViewOptions: {block: “start”, inline: “nearest”}
//false：等价于scrollIntoViewOptions: {block: “end”, inline: “nearest”}
scrollIntoViewOptions： 对象

behavior: 定义动画过度效果， ‘auto / smooth’ , 默认 ‘auto’
block：定义垂直方向的对齐， “start / center / end / nearest”。默认为 “start”。
inline 定义水平方向的对齐， “start / center / end / nearest”。默认为 “nearest”

一、问题

按照js标准选择元素方式，scrollIntoView在vue里失效

二、原因

该方法需在页面完全加载后才能生效

三、解决

方法一：

利用setTimeout方法

	setTimeout(function(){
        document.getElementById(target).scrollIntoView();
     },100)

方法二：

运用vue中的this.$nextTick方法

	this.$nextTick(()=>{
	//对象方式设置滚动状态
       document.querySelector("#01commonly").scrollIntoView({
          block: 'end',
          behavior: 'smooth'
        })
	})
	

四、参考

参考1
参考2
参考3