vue监听滚动scrollTop一直是0的问题

先附上正常写法
  mounted () {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  destroyed () {
    document.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      console.log('scrollTop', scrollTop);
    }
  }

结果获取到的一直是0

输出

很简单的问题,,当时一直没想明白。郁闷了一会在网上搜也没搜到答案,所以写个简书吧

解决方法

    handleScroll () {
      // let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      let scrollTop = document.querySelector('#app').scrollTop
      console.log('scrollTop', scrollTop);
    }

直接获取#app的就可以了。(当然,Vue 里的代码最好在 destroyed 钩子触发时,将一些事件监听器移除,以免对其他组件造成影响。)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容