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);
然后想到的思路是设置一个计时器,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);
相关文章推荐
- js判断鼠标滚轮上下滚动
- js 判断鼠标滚轮方向
- 学习--jquery 记录 使用js判断滚轮滚动方向
- js 鼠标双击滚动单击停止
- JS判断鼠标向上滚动还是向下滚动
- js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
- js实现鼠标经过时图片滚动停止的方法
- js图片滚动效果时间可随意设定当鼠标移上去时停止
- JS判断鼠标是否滚动
- js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
- JS实现鼠标双击页面向下滚动,单击停止的特效
- js判断鼠标滚动放下,向上滚还是向下滚?
- js改变图片大小——把鼠标放图片上,滚动鼠标滚轮.
- 逐行向上滚动 js 代码,鼠标移上停止滚动,不满一屏的时候不滚动
- js鼠标滚轮上下滚动监听事件应用实例(跨浏览器,亲测)
- 滚动 CSS3 鼠标滚轮滚动插件jQuery Smoove.js
- 判断鼠标滚轮的滚动方向
- js图片滚动,鼠标经过滚动停止效果
- js判断鼠标滚动方向
- js图片滚动效果时间可随意设定当鼠标移上去时停止