利用vue怎么对滚动事件进行监听-创新互联

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

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

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

{{item}}

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

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

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

上述内容就是利用vue怎么对滚动事件进行监听，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。