vue监听滚动事件的方法
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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。