Vueでdivスクロールモニタリングを迅速に実現

2010 ワード

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のジッタ防止関数で、スクロール時のパフォーマンスを向上させ、遅延は自分で変更できます.