Author: 一英尺卷烟 Homepage: https://www.xielikang.com
需求
最近遇到一个变态需求, 滚动的时候将元素 x 隐藏掉, 当滚动条滚动停止的时候再把元素 x 显示出来.
思路
监听浏览器滚动事件 (onscroll), 当然您也可以用 jquery 写
事件触发的时候获取当前的 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, 1000);
- t1 = document.documentElement.scrollTop || document.body.scrollTop;
- }
- function isScrollEnd() {
- t2 = document.documentElement.scrollTop || document.body.scrollTop;
- if(t2 == t1){
- console.log('滚动结束了')
- }
- }
喜欢这篇文章的可以点一下喜欢还有关注哦, 你们的关注是我写下去的动力!
来源: http://www.jianshu.com/p/3eec4460ef79