您的位置:首页 > Web前端 > JavaScript

JS判断鼠标滚轮停止滚动

2017-08-01 21:21 716 查看
学习过程中碰到需要在滚轮滚动以及停止滚动时触发不同的事件,然后发现JS里监听的事件只有鼠标滚动事件;
然后想到的思路是设置一个计时器,200毫秒后执行滚轮停止事件,每次滚动重置计时器的时间,但是这样做的话会增加事件响应时间,因此在网上翻了很久,发现大家普遍都是这个思路,并没有看到更好的做法,只好按照这个想法做了。
下面是我完成这个判断写的代码。
var moveWheel1 = true;
var moveWheel2 = false;
var wheelClock;
function stopWheel(){
if(moveWheel2 == true){
console.log("滚轮停止了");
moveWheel2 = false;
moveWheel1 = true;
//这里写停止时调用的方法
}
}
function moveWheel(){
if(moveWheel1==true){
console.log("滚动了");
moveWheel1 = false;
moveWheel2 = true;
//这里写开始滚动时调用的方法
wheelClock = setTimeout(stopWheel,200);
}
else {
clearTimeout(wheelClock);
wheelClock = setTimeout(stopWheel,150);
}
}在计时器的等待时间上写了稍微改动了初次触发和之后再触发的时间长度。是因为考虑到滚动时可能刚开始没那么快,避免反复触发开始滚动和停止滚动的事件。
最后是把这个函数绑定到滚轮事件上,只需要类似这样document.addEventListener('wheel', moveWheel, false);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: