利用vue怎么对滚动事件进行监听-创新互联
本篇文章为大家展示了利用vue怎么对滚动事件进行监听，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
创新互联建站主要从事成都网站设计、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务尼河口,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220
vue中监听滚动事件，然后对其进行事件处理，一般有：1. 滚动到顶部吸附； 2. 根据滚动的位置激活对应的tab键（锚链接tab键）
这两种方式的处理都是可通过监听scroll来实现
mounted(){
window.addEventListener('scroll',this.handleScroll) // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
}处理方法
1. 滚动到顶部吸附
html元素
这个是要滚动到顶部吸附的元素
methods方法
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
}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; 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怎么对滚动事件进行监听，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。
分享标题：利用vue怎么对滚动事件进行监听-创新互联
文章出自：
http://chengdu.cdxwcx.cn/article/jhgpi.html
