vue中监听页面滚动和监听某元素滚动

我与影子孤独终老i 提交于 2019-12-04 02:15:05

①监听页面滚动

在生命周期mounted中进行监听滚动:

mounted () {
    window.addEventListener('scroll', this.scrollToTop)
},

在方法中定义监听滚动执行的方法:

scrollToTop() { 
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    console.log(scrollTop) 
},

 ②监听某元素滚动

tips:需要监听的这个元素需要拥有固定的高度

vue组件中:

<div class="read-con"  @scroll="scrollEvent" >
</div>

 在方法中定义scrolldiv,是监听class为read-con滚动以后需要执行的方法

scrollEvent () {
      let _this = this
      let read = _this.$el.querySelector('#read')
      console.log(read.scrollToTop)
},

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!