Vue 中快速实现div滚动监控

在Vue中有时候,我们只需要知道页面开始滚动,并不想知道是往哪个方向滚动,可以使用以下代码:

<script>
    data(){
        return{scrolling: false }
    },
    mounted() {
        this.$refs.scrollDiv.addEventListener("scroll", this.debounceScroll);
    },
    methods:{
                handleScroll(event) {
                  if (event.currentTarget) {
                    // 开始滚动
                    console.log("开始滚动");
                    this.scrolling = true;
                  } else {
                    //结束滚动
                    console.log("结束滚动");
                    this.scrolling = false;
                  }
                },
                debounceScroll: _.debounce(
                  function(e) {
                    this.handleScroll(e);
                  },
                  1000,
                  {
                    leading: true,
                    trailing: true
                  }
                )
    }
</script>

然后通过this.scrolling即可判断是否页面正在滚动

_.debounce是lodash的防抖动函数,用来提高在滚动时的性能,延迟可以自己更改