检查用户是否使用触控板滚动？

Question

我创建了一个网站，用户可以使用鼠标滚动或向上/向下箭头滚动浏览图库。它像我想要的那样工作，并且在用鼠标滚动时更改一个图像。 但是，如果用户使用触控板滚动，则几乎不可能一次滚动单个图像。

所以我的问题是：有没有办法检查用户是否通过触控板滚动，然后更改滚动的行为，使其变得不那么敏感，从而更容易一次滚动单个图像？

我不是在jQuery的非常好，我的解决方案迄今已经从几个脚本放在一起：

http://jsfiddle.net/MukuMedia/PFjzX/33/

希望有人能帮助我:)

Answer 1

不，这是不可能。我能想到的唯一解决方案是设置滚动速度的限制。我不会尝试破译你的代码，但是我建议将timedOut变量初始化为零，每当你滚动到一个新的图像时，该变量被设置为1。例如，在50ms之后，使用setTimeout()将其设置回零。在滚动到新图像之前，请检查timedOut变量，并且只在滚动条为零时滚动。 （请务必将您的setTimeout放在timedOut支票的内部，否则它会在每次鼠标滚轮移动时不断调用，这不是您想要的。）

Answer 2

我遇到了类似的问题，我创建的插件。我结束了用一个“动画”变量解决它：只有当这个变量设置为'false'时，轮子动作才起作用，一旦触发变量切换为'true'，那么我会将变量切换回'false'一次动画完成。 希望这有助于！

Answer 3

我发现了一个神奇的数字这里曾是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. 
}); 

Answer 4

这差不多就是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){ 
     // do whatever 
    } 

    // will only fire a maximum of 10 times a second 
    var debouncedOnWheel = rateLimit(onWheel, 100); 
    window.addEventListener("onwheel", debouncedOnWheel); 

Answer 5

我发现一个解决方案，检测用户是否使用触摸板。它工作的很好，只有两个小缺点。

首先它会在第一次触发事件后检测到mousescroll，所以只需用鼠标滚轮单击一下即可。但这只是第一次。然后我们可以缓存导致第二个小问题的值。当用户有一个触控板和一个带轮子的鼠标时，它会检测先使用的任何东西。对我来说，这些问题可以忽略不计。这里的代码

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);