vue 指定元素滚动到页面可视区域

使用场景：

1、点击页面tab，或步骤条的某一步，使其对应元素滚动到页面可视区域
2、使遍历而来的list滚动到页面可视区域

实现：

使用el.scrollIntoView() API实现

scrollIntoView()方法会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见。
注意：要设置页面(最外层容器)可滚动，否则不会生效

语法：

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

参数：

什么都不传，默认为el.scrollIntoView(true)

alignToTop:

• true: 元素的顶端将和其所在滚动区的可视区域的顶端对齐
• false 元素的底端将和其所在滚动区的可视区域的底端对齐

scrollIntoViewOptions:
可以传入一个配置对象，包含三个属性：
behavior:定义动画过渡效果，"auto"或 “smooth” 之一。默认为 “auto”。
block:定义垂直方向的对齐， “start”, “center”, “end”, 或 "nearest"之一。默认为 “start”。
inline:定义水平方向的对齐， “start”, “center”, “end”, 或 "nearest"之一。默认为 “nearest”。

实际应用：

因为该api是dom元素的方法，所以我们首先要获取到dom元素，然后调用该方法就可以实现想要的效果,

页面a -> 页面b, 点击页面a的列表，希望在页面b将该条列表内容滚动到可视区域顶部

点击a页面的某一条，将index通过路由传到b页面，在b页面通过watch路由中的参数，调用b页面中元素的scrollIntoView方法：

<div class="noticeWrapper" v-if="tableData && tableData.length">
      <div :class="['notice',`notice${index}`]" v-for="(item ,index) of tableData" :key="index">
      </div>
    </div>

watch:{
	'$route.place':{
		handler(newV){
			if(newV){
				this.$nextTick(() => { 
	           this.$el.querySelector(`.notice${newV}`).scrollIntoView({
	                  behavior: "smooth",
	                  block:'start'
	                })
	            })
			}
		}
	}
}