檢查用戶是否使用觸控板滾動？

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