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

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

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

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

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

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

    <template>
      <!-- 滚动视图 -->
      <div ref="scrollview" @mousewheel="scrollChange"></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>
    
上一篇:ThreadLocal使用


下一篇:【iOS】SwiftUI 滚动 (scroll)