Vue 监听某个元素滚动，亲测有效

• Vue 开发，有时候只需要监听某个元素是否滚动就行了，不需要去监听整个页面。

• Vue 有自带的 @scroll 但是并没有什么用，给某个滚动元素加上，滚动该元素并不会调用，加上 CSS 支持滚动样式也一样。

• 怎么监听呢？通过 addEventListener 与 @mousewheel 配合实现

  • addEventListener: 增加的是拖拽滚动条也能监听到滚动

  • @mousewheel：添加的是非拖拽滚动条滚动，比如在元素上鼠标或者触摸板滚动。

  <template>
    <!-- 滚动视图 -->
    <div class="scrollview" ref="scrollview" @mousewheel="scrollChange">
      <!-- 内容区域 -->
      <div class="content"></div>
    </div>
  </template>
  
  <script>
  export default {
    mounted () {
      // 获取指定元素
      const scrollview = this.$refs['scrollview']
      // 添加滚动监听，该滚动监听了拖拽滚动条
      // 尾部的 true 最好加上，我这边测试没加 true ，拖拽滚动条无法监听到滚动，加上则可以监听到拖拽滚动条滚动回调
      scrollview.addEventListener('scroll', this.scrollChange, true)
    },
    // beforeDestroy 与 destroyed 里面移除都行
    beforeDestroy () {
      // 获取指定元素
      const scrollview = this.$refs['scrollview']
      // 移除监听
      scrollview.removeEventListener('scroll', this.scrollChange, true)
    },
    methods: {
      // 滚动监听
      scrollChange () {
        console.log('滚动中')
      }
    }
  }
  </script>
  
  <style scoped>
  .scrollview {
    height: 100px;
    overflow-y: auto;
    background-color: yellow;
  }
  .content {
    height: 500px;
    background-color: red;
  }
  </style>
  

• 案例效果