该代码几乎可以正常工作,但是有一个小问题,那就是我希望得到您的帮助的地方。
目标:这个脚本的这个目标是调用
parseScroll();
函数一个用户车轮使用鼠标时的时间。问题:代码最初有效。但是,如果在短距离内用手指在鼠标上多次滚动,
parseScroll();
则不会调用该函数。之所以这样做,是因为由于采用了防反弹算法来防止该函数被调用数千次,因此尚未意识到上一个轮子已经结束。(更新):我发现这篇文章似乎可以解决我所寻找的问题。有人可以帮助我理解它并用纯JavaScript重新创建吗?http://demos111.mootools.net/鼠标轮
旁注:此问题特定于OS X,但如果Windows用户可以告诉我它是否正在执行Windows中应做的工作,我将不胜感激,因为我没有Windows机器可以对其进行测试。
这是给我带来问题的脚本的副本。
window.addEventListener('load', function() {
var scrollStatus = {
wheeling: false,
functionCall: false
};
var scrollTimer = false;
window.addEventListener('wheel', function(e) {
scrollStatus.wheeling = true;
if (!scrollStatus.functionCall) {
parseScroll(e);
scrollStatus.functionCall = true;
}
window.clearInterval(scrollTimer);
scrollTimer = window.setTimeout(function() {
scrollStatus.wheeling = false;
scrollStatus.functionCall = false;
}, 500);
});
function parseScroll(e) {
//console.log(scrollStatus.functionCall)
console.log(e.deltaY)
if (e.deltaY > 0) {
console.log('scrolled down')
}
if (e.deltaY < 0) {
console.log('scrolled up')
}
}
});
html,
body {
width: 100%;
height: 100%;
background: #333;
overflow: hidden;
color: #fff;
}
Please wheel on your mouse and open your web inspector console to see resulting behavior.
请在评论中提出问题,然后重新访问该问题,因为我会找到更好的描述问题的方法,因此我可能会更改描述。
我希望我的解决方案使用JavaScript。
如您所知,问题似乎在于去抖动功能。您要做的就是更改毫秒间隔,这应该可以解决。
注意:我取出了HTML和CSS,以使事情变得更整洁。我还对JS进行了一些编辑以使其更短-希望这不是问题!
window.addEventListener('load', function() {
var scrollStatus = {
wheeling: false,
functionCall: false
};
var scrollTimer = false;
window.addEventListener('wheel', function(e) {
scrollStatus.wheeling = true;
if (!scrollStatus.functionCall) {
//parseScroll here
console.log(e.deltaY)
if (e.deltaY > 0) {
console.log('scrolled down')
}
if (e.deltaY < 0) {
console.log('scrolled up')
}
scrollStatus.functionCall = true;
}
window.clearInterval(scrollTimer);
scrollTimer = window.setTimeout(function() {
scrollStatus.wheeling = false;
scrollStatus.functionCall = false;
}, 50); //set this millisecond to your liking
});
});