vue 指定元素滚动到页面可视区域
使用场景:1、点击页面tab,或步骤条的某一步,使其对应元素滚动到页面可视区域2、使遍历而来的list滚动到页面可视区域实现:使用el.scrollIntoView() API实现scrollIntoView()方法会滚动元素的父容器,使被调用scrollIntoView()的元素对用户可见。注意:要设置页面(最外层容器)可滚动,否则不会生效语法:element.scrollIntoView();
使用场景:
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'
})
})
}
}
}
}
更多推荐
所有评论(0)