Vue中监听滚动事件，如何改写为长尾？

本文共计759个文字，预计阅读时间需要4分钟。

在Vue中监听滚动事件，然后对其进行处理，一般有以下两种方式：

1. 滚动到顶部吸附：当滚动到页面顶部时，自动吸附在顶部。

2.根据滚动位置激活对应的tab键（链接tab键）：根据滚动位置，激活对应的tab键或链接。

这两种方式的处理都可以通过监听`scroll`事件来实现。

javascript

mounted() { window.addEventListener('scroll', ()=> { // 1. 滚动到顶部吸附 if (window.scrollY===0) { // 吸附逻辑 }

// 2. 根据滚动位置激活对应的tab键（链接tab键） const tabs=document.querySelectorAll('.tab'); tabs.forEach(tab=> { const tabPosition=tab.offsetTop; if (window.scrollY >=tabPosition) { // 激活逻辑 } }); });}

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

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

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

处理方法

1. 滚动到顶部吸附

html元素

<!--如果isFixed为true的话，就添加class is_fixed 设置固定定位--> <div id="boxFixed" :class="{'is_fixed' : isFixed}"> 这个是要滚动到顶部吸附的元素 </div>

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 ，具体参照 developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

(1) 实现锚链接：

<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) 实现滚动到相应的位置激活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&&scrollTop<anchorOffset1){ 　　　　　　this.seeThis = 0 　　　　} 　　　　if(scrollTop>anchorOffset1&&scrollTop<anchorOffset2){ 　　　　　　this.seeThis = 1 　　　　} 　　　　if(scrollTop>anchorOffset2){ 　　　　　　this.seeThis = 2 　　　　} 　　}, }

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