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的防抖动函数,用来提高在滚动时的性能,延迟可以自己更改
更多推荐
已为社区贡献5条内容
所有评论(0)