Vue关于滚动停止的监听方法

js没有提供页面滑动停止的方法,只有正在滚动的方法.所以需要自己专门写一个关于滚动停止的方法事例代码如下:

data() {

return { lastScroll:0,//记录上一次的滚动位置

timer:''//定时器

}

},

mounted() {

this.box =this.$refs.ct//可以滚动的UI控件

//监听UI控件的滚动,并记录每次滑动距离,每一次滚动就会启动一个延时执行的定时器,滚动停止之后就不会走滑动的回调方法,但是延时方法还会执行,

在延时方法会判断当前滑动位置和上一次滑动位置是否相等,如果相等,则是滚动停止了,为了避免多个定时器,每次滑动的时候都会销毁上次滑动回调生成的定时器

this.box.addEventListener('scroll', () => {

clearTimeout(this.timer)

this.timer =null; this.lastScroll =this.$refs.ct.scrollTop;

//开始滑动

console.log('beginScroll');

this.$emit('beginScroll')

this.timer =setTimeout( ()=> {

if(this.lastScroll ==this.$refs.ct.scrollTop ){

//停止滑动

this.$emit('endScroll')

console.log('endScroll');

}

},100)

}, false)

},