2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > vue实现锚点跳转:scrollIntoView()

vue实现锚点跳转:scrollIntoView()

时间:2021-10-24 09:52:25

相关推荐

vue实现锚点跳转:scrollIntoView()

vue实现锚点跳转:scrollIntoView()

说明:

滚动到某个特定元素 :scrollIntoView();例如form表单或者div滚动到底部,

document.getElementsByClassName(‘’)或者document.getElementsById(‘’)

获取到元素后即可实现回到可视化区域(也可理解为回到顶部)。

使用案例:

<div> v-for="(value,index) in data" class="roll">{{...}}</div>

js部分

methods:{scrollToPosition(index){document.getElementsByClassName('roll')[index].scrollIntoView()}

这样就利用scrollIntoView()简单实现了一个锚点跳转,下边讲解scrollIntoView中的一些属性:

scrollIntoView(true)相等于scrollIntoView();元素的顶端将和其所在滚动区的可视区域的顶端对齐

为true时相应的 scrollIntoViewOptions: {block: “start”, inline:

“nearest”}。这是这个参数的默认值。

scrollIntoView(false)元素的底端将和其所在滚动区的可视区域的底端对齐

为false时相应的scrollIntoViewOptions: {block: “end”, inline: “nearest”}。

同时他的参数也可以配置成一个object对象

scrollIntoView({behavior:auto //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。block:start//定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。inline:nearest//"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。})

其中smooth是平滑滚动 start和end是目标滚动到的位置

注意:兼容性的问题多数主流浏览器已经支持其基本功能,也就是说,使用true,false两个参数,来实现木讷的定位(没有滚动动画)是没有任何问题的,但是传入object参数时,IE各种版本会直接忽略,全部看成true参数属性,如果想看到滚动动画,使用火狐和chrome。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。