我创建了一个网站，用户可以在其中使用鼠标滚动或向上/向下箭头滚动浏览画廊。它像我想要的那样工作，并在使用鼠标滚动时更改一个图像 pr 滚动。 但如果用户使用触控板滚动，几乎不可能一次滚动单个图像。
所以我的问题是：有没有办法检查用户是否正在通过触控板滚动，然后改变滚动的行为，使其变得不那么敏感，从而更容易一次滚动单个图像？
我不太擅长 jquery，到目前为止我的解决方案是由几个脚本组合而成的：
http://jsfiddle.net/MukuMedia/PFjzX/33/
希望有人可以帮助我:)
【问题讨论】：
:)
我发现这里的神奇数字是 40。
似乎使用触控板（可能也使用魔术鼠标），增量增加了 40 倍。
即使您稍后收回普通鼠标并使用它滚动，它也会保持这种状态。
所以我做了什么，使用jquery mousewheel plugin：
b.mousewheel(function(evt,delta,deltaX,deltaY){
if(Math.abs(deltaY)>=40)
deltaY/=40;
if(Math.abs(deltaX)>=40)
deltaX/=40;
//Do your stuff here.
});
【讨论】：
不，这是不可能的。我能想到的唯一解决方案是限制滚动速度。我不会尝试破译您的代码，但我建议将 timedOut 变量初始化为零，每次滚动到新图像时将其设置为 1。使用 setTimeout() 在 50 毫秒后将其设置回零。在滚动到新图像之前，请检查此 timedOut 变量，只有在它为零时才滚动。 （确保将 setTimeout 放在 timedOut 检查内，否则每次鼠标滚轮移动时都会不断调用它，这不是您想要的。）
【讨论】：
这几乎就是 DC_ 所建议的。我想我会发布这个，因为它是一个实际的实现。
// similar to _.debounce, but was having issues with it, so I made this.
function rateLimit(func, time){
var callback = func,
waiting = false,
context = this;
var rtn = function(){
if(waiting) return;
waiting = true;
var args = arguments;
setTimeout(function(){
waiting = false;
callback.apply(context, args);
}, time);
};
return rtn;
}
function onWheel(e){
// Add your code here
}
// will only fire a maximum of 10 times a second
var debouncedOnWheel = rateLimit(onWheel, 100);
window.addEventListener("wheel", debouncedOnWheel);
【讨论】：
我创建的“section-change”插件遇到了类似的问题。我用一个“动画”变量结束了它：轮子动作只有在这个变量设置为“假”时才有效，一旦触发，变量切换到“真”，然后我将变量切换回“假”一次动画完成。 希望这会有所帮助！
【讨论】：
我找到了一个检测用户是否使用触摸板的解决方案。它效果很好，只有两个小缺点。
首先它会在第一个触发事件后检测到鼠标滚动，所以鼠标滚轮单击一次，什么都不做。但这只是第一次。然后我们可以缓存导致第二个小问题的值。当用户有一个触控板和一个带滚轮的鼠标时，它会检测到首先使用的内容。对我来说，这些问题可以忽略不计。代码在这里
var scrolling = false;
var oldTime = 0;
var newTime = 0;
var isTouchPad;
var eventCount = 0;
var eventCountStart;
var mouseHandle = function (evt) {
var isTouchPadDefined = isTouchPad || typeof isTouchPad !== "undefined";
console.log(isTouchPadDefined);
if (!isTouchPadDefined) {
if (eventCount === 0) {
eventCountStart = new Date().getTime();
}
eventCount++;
if (new Date().getTime() - eventCountStart > 50) {
if (eventCount > 5) {
isTouchPad = true;
} else {
isTouchPad = false;
}
isTouchPadDefined = true;
}
}
if (isTouchPadDefined) { // in this if-block you can do what you want
// i just wanted the direction, for swiping, so i have to prevent
// the multiple event calls to trigger multiple unwanted actions (trackpad)
if (!evt) evt = event;
var direction = (evt.detail<0 || evt.wheelDelta>0) ? 1 : -1;
if (isTouchPad) {
newTime = new Date().getTime();
if (!scrolling && newTime-oldTime > 550 ) {
scrolling = true;
if (direction < 0) {
// swipe down
} else {
// swipe up
}
setTimeout(function() {oldTime = new Date().getTime();scrolling = false}, 500);
}
} else {
if (direction < 0) {
// swipe down
} else {
// swipe up
}
}
}
}
document.addEventListener("mousewheel", mouseHandle, false);
document.addEventListener("DOMMouseScroll", mouseHandle, false);
【讨论】：