微客导航 » 文章资讯 » vue监听滚动事件的方法

vue监听滚动事件的方法

2023-07-08 00:32:03 179

vue中监听滚动事件，然后对其进行事件处理，一般有：1.滚动到顶部吸附；2.根据滚动的位置激活对应的tab键（锚链接tab键）

这两种方式的处理都是可通过监听scroll来实现

mounted(){
window.addEventListener('scroll',this.handleScroll)//监听滚动事件，然后用handleScroll这个方法进行相应的处理
}

处理方法

1.滚动到顶部吸附

html元素



这个是要滚动到顶部吸附的元素

methods方法

handleScroll(){
letscrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop//滚动条偏移量
letoffsetTop=document.querySelector('#boxFixed').offsetTop;//要滚动到顶部吸附的元素的偏移量
this.isFixed=scrollTop>offsetTop?true:false;//如果滚动到顶部了，this.isFixed就为true
}

2. 根据滚动的位置激活对应的tab键（锚链接tab键）

vue里实现锚链接，不能直接用a链接方式，因为用的是hash路由，直接a链接会跳转路由，可用scrollIntoView，具体参照https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

(1)实现锚链接：

{{item}}

block1

(2)实现滚动到相应的位置激活tab

data(){
return{
seeThis:0,
tabs:['tab0','tab1','tab2'],
}
},
methods:{
goAnchor(index){//也可以用scrollIntoView方法，但由于这里头部设置了固定定位，所以用了这种方法
//document.querySelector('#anchor'+index).scrollIntoView()
this.seeThis=index;varanchor=this.$el.querySelector('#anchor'+index)
document.body.scrollTop=anchor.offsetTop-100
document.documentElement.scrollTop=anchor.offsetTop-100
},
}

methods:{
handleScroll(){
varanchorOffset0=this.$el.querySelector('#anchor0').offsetTop-100
varanchorOffset1=this.$el.querySelector('#anchor1').offsetTop-100
varanchorOffset2=this.$el.querySelector('#anchor2').offsetTop-100
if(scrollTop>anchorOffset0&&scrollTopanchorOffset1&&scrollTopanchorOffset2){
this.seeThis=2
}
},
}

以上就是vue监听滚动事件的方法的详细内容，更多关于vue监听滚动事件的资料请关注毛票票其它相关文章！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue监听滚动事件的方法

处理方法

1.滚动到顶部吸附

2. 根据滚动的位置激活对应的tab键（锚链接tab键）

热门推荐

随机推荐