利用vue怎么對(duì)滾動(dòng)事件進(jìn)行監(jiān)聽

本篇文章為大家展示了利用vue怎么對(duì)滾動(dòng)事件進(jìn)行監(jiān)聽，內(nèi)容簡明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

vue中監(jiān)聽滾動(dòng)事件，然后對(duì)其進(jìn)行事件處理，一般有：1. 滾動(dòng)到頂部吸附； 2. 根據(jù)滾動(dòng)的位置激活對(duì)應(yīng)的tab鍵（錨鏈接tab鍵）

這兩種方式的處理都是可通過監(jiān)聽scroll來實(shí)現(xiàn)

mounted(){
　　window.addEventListener('scroll',this.handleScroll) // 監(jiān)聽滾動(dòng)事件，然后用handleScroll這個(gè)方法進(jìn)行相應(yīng)的處理
}

處理方法

1. 滾動(dòng)到頂部吸附

html元素

<!--如果isFixed為true的話，就添加class is_fixed 設(shè)置固定定位-->
<div id="boxFixed" :class="{'is_fixed' : isFixed}">
這個(gè)是要滾動(dòng)到頂部吸附的元素
</div>

methods方法

handleScroll(){
　　let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滾動(dòng)條偏移量
　　let offsetTop = document.querySelector('#boxFixed').offsetTop; // 要滾動(dòng)到頂部吸附的元素的偏移量
　　this.isFixed = scrollTop > offsetTop ? true : false; // 如果滾動(dòng)到頂部了，this.isFixed就為true
}

2. 根據(jù)滾動(dòng)的位置激活對(duì)應(yīng)的tab鍵（錨鏈接tab鍵）

vue里實(shí)現(xiàn)錨鏈接，不能直接用a鏈接方式，因?yàn)橛玫氖莌ash路由，直接a鏈接會(huì)跳轉(zhuǎn)路由，可用scrollIntoView ，具體參照 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

(1) 實(shí)現(xiàn)錨鏈接：

<div class="flexitem" v-for="(item,index) in tabs" :class="seeThis==index?'active':''"><a href="javascript:void(0)" rel="external nofollow" @click="goAnchor(index)">{{item}}</a></div>

<div id="anchor1">block1</div>

(2) 實(shí)現(xiàn)滾動(dòng)到相應(yīng)的位置激活tab

data(){
　　return{
　　　　seeThis:0,
　　　　tabs:['tab0','tab1','tab2'],
　　}
},
methods:{
　　goAnchor(index) { // 也可以用scrollIntoView方法， 但由于這里頭部設(shè)置了固定定位，所以用了這種方法
　　　　// 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&&scrollTop<anchorOffset1){
　　　　　　this.seeThis = 0
　　　　}
　　　　if(scrollTop>anchorOffset1&&scrollTop<anchorOffset2){
　　　　　　this.seeThis = 1
　　　　}
　　　　if(scrollTop>anchorOffset2){
　　　　　　this.seeThis = 2
　　　　}
　　},
}

上述內(nèi)容就是利用vue怎么對(duì)滾動(dòng)事件進(jìn)行監(jiān)聽，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。