vue监听滚动事件的方法

 更新时间:2020年12月21日 10:00:34   作者:东海之子  
这篇文章主要介绍了vue监听滚动事件的方法,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下

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 ,具体参照 https://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监听滚动事件的资料请关注脚本之家其它相关文章!

相关文章

  • Vue学习之Vuex的使用详解

    Vue学习之Vuex的使用详解

    这篇文章主要介绍了Vue中的插件:Vuex。本文将围绕它的优缺点、使用场景和示例展开详细的说明,感兴趣的小伙伴可以跟随小编一起了解一下
    2022-01-01
  • vue中activated的用法

    vue中activated的用法

    这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • Vue.js划分组件的方法

    Vue.js划分组件的方法

    这篇文章主要介绍了Vue.js划分组件的方法,需要的朋友可以参考下
    2017-10-10
  • Vue组件通信之父传子与子传父深入探究

    Vue组件通信之父传子与子传父深入探究

    对于vue来说,组件之间的消息传递是非常重要的,用vue可以是要组件复用的,而组件实例的作用域是相互独立,这意味着不同组件之间的数据无法互相引用,一般来说,组件之间可以有几种关系,下面是我对组件之间消息传递的常用方式的总结
    2022-12-12
  • vue3使用particles插件实现粒子背景的方法详解

    vue3使用particles插件实现粒子背景的方法详解

    这篇文章主要为大家详细介绍了vue3使用particles插件实现粒子背景的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • Vue之自定义事件内容分发详解

    Vue之自定义事件内容分发详解

    这篇文章主要为大家介绍了Vue的自定义事件内容分发,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • vue实现计数器简单制作

    vue实现计数器简单制作

    这篇文章主要为大家详细介绍了vue实现计数器简单制作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • vue-cli中的图片资源存放位置详解

    vue-cli中的图片资源存放位置详解

    这篇文章主要介绍了vue-cli中的图片资源存放位置,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 解决vue 绑定对象内点击事件失效问题

    解决vue 绑定对象内点击事件失效问题

    今天小编就为大家分享一篇解决vue 绑定对象内点击事件失效问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue学习之axios的使用方法实例分析

    Vue学习之axios的使用方法实例分析

    这篇文章主要介绍了Vue学习之axios的使用方法,结合实例形式分析了vue.js axios库的功能及网络请求相关操作技巧,需要的朋友可以参考下
    2020-01-01

最新评论