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