捕獲滾輪事件

我想在用戶在頁面不滾動/不滾動的情況下滾動滾動輪時捕獲事件。但是，標準的JS滾動事件只會在瀏覽器實際滾動時觸發，並且不會爲DOM元素觸發，以隱藏溢出。捕獲滾輪事件

谷歌地圖的滾動到縮放是我正在尋找的行爲類型的一個例子。

有沒有人有任何想法如何完成這樣的事情？

謝謝。

來源

2012-11-08 Zev

它適用於Firefox和Chrome。 **現場演示：** http://jsfiddle.net/chtNP/1/ –

根據不同的版本，這在IE或Opera中不會奏效（請參閱http://www.adomas.org/javascript-鼠標滾輪/） – Kelvin

@KelvinMackay我已經在IE9和IE8中測試過了，它可以工作。 –

您可以捕獲鼠標 - 車輪事件就好了：

$('#yourElement').on('DOMMouseScroll mousewheel', function() { 
    ... 
});

現場演示：http://jsfiddle.net/chtNP/1/

（我使用jQuery到事件處理程序綁定，但它的作品無論你使用這當然API）

來源

2012-11-08 01:51:29

完美的，謝謝你，我不知道這個事件，並且一定在我的谷歌搜索中錯過了它。 – Zev

是否有可能確定用戶是否正在向上或向下滾動？ –

@RobinCastlin是的。滾動事件爲此提供了一個屬性。這有不同的實現，所以你需要編寫一些if-else代碼來跨瀏覽器獲取值。 –

使用jQuery，您可以使用this plugin或任何數目的類似的功能來執行相同的操作。

如果jQuery的或類似的框架是不是一種選擇，這是可能的，但如果你想獲得它在多個瀏覽器工作了痛苦的世界做好準備......

來源

2012-11-08 01:47:35 Kelvin

如果你不得不閱讀文檔（比如我），如果沒有jQuery，需要花費很多（很多！）的時間。但我不會說它是一個痛苦的世界，特別是如果你只是複製粘貼我的解決方案。 – Rolf

目前，Firefox定義了DOMMouseScroll和wheel事件。 Chrome，Opera和IE（最新，再次！）定義鼠標滾輪。

這是我做的：

if(window.onwheel !== undefined) { 
    window.addEventListener('wheel', onMouseWheel) 
} else if(window.onmousewheel !== undefined) { 
    window.addEventListener('mousewheel', onMouseWheel) 
} else { 
    // unsupported browser 
}

注意老年人的IE版本的addEventListener支持需要填充工具。或者，您可以使用舊的window.mousewheel = function（）{}或其他方法。

正如您所看到的，事件偵聽器已附加到窗口對象。您不能以跨瀏覽器的方式將其附加到元素上。您可以使用事件對象目標屬性來查看觸發的位置，並在此基礎上執行過濾器。在IE中，在回調函數（「onMouseWheel」）中處理事件對象時，必須使用事件對象內的「wheelDelta」屬性（並將其顛倒）。其他瀏覽器將填充「deltaY」（或「deltaX」用於水平滾動）。

來源

2013-12-09 17:45:32 Rolf

捕獲滾輪事件

回答

相關問題