js判断浏览器滚动条滚动停止

需求

最近遇到一个变态需求，滚动的时候将元素x隐藏掉，当滚动条滚动停止的时候再把元素x显示出来。

思路

• 监听浏览器滚动;
• 事件触发的时候获取当前的scrollTop( t1 )，执行isScrollEnd函数( 建议延迟500 );
• 在isScrollEnd函数种再获取当前的scrollTop( t2 );
• 拿t2跟t1进行比较，看是否相等，相等的话说明滚动条停止了滚动;

注意

每次滚动的时候都需要清空掉timer定时器，当您不滚动的时候才真正的执行到timeout里面的回调函数isScrollEnd，因为您在滚动的时候一直都在清空timer，因此不会执行isScrollEnd函数。

代码

let t1 = 0;
let t2 = 0;
let timer = null; // 定时器

// scroll监听
document.onscroll = function() {
  clearTimeout(timer);
  timer = setTimeout(isScrollEnd, 500);
  t1 = document.documentElement.scrollTop || document.body.scrollTop;
}

function isScrollEnd() {
  t2 = document.documentElement.scrollTop || document.body.scrollTop;
  if(t2 == t1){
    console.log('滚动结束了')
  }
}
复制代码

如果您喜欢这篇文章，那么记得动动你们的?，给个like或者关注我哦?

转载于:https://juejin.im/post/5acb3a8f5188255cb32e6fb9