轉自：?http://www.w3cmm.com/javascript/mousewheel-dommousescroll.html

IE6.0首先實現了mousewheel事件。此后，Opera、Chrome和Safari也都實現了這個事件。當用戶通過鼠標滾輪與頁面交互、在垂直方向上滾動頁面時（無論向下還是向上），就會觸發mousewheel事件。這個事件可以在任何元素上面觸發，最終會冒泡到document(IE)或window(Opera、Chrome、及Safari)對象。與mousewheel事件對應的event對象包含鼠標事件的所有標準信息之外，還包含一個特殊的wheelDelta屬性。當用于向前滾動鼠標滾輪是，wheelDelta是120的倍數；當用戶向后滾動鼠標滾輪是，wheelDelta是-120的倍數。
將mousewheel事件處理程序指定給頁面中的任何元素或document對象，即可以處理鼠標滾輪的交互操作。來看下面的例子

Event.addHnadler(document, "mousewheel", function (event) {event = EventUtil.getEvent(event);alert(event.wheelDelta); });

這個例子會在發生mousewheel事件時顯示wheelDelta的值。多數情況下，只要知道鼠標滾輪滾動的方向就夠了，而這通過檢測wheelDelta的正負號就可以確定。
在Opera9.5之前的版本中，wheelDelta的值的正負號是顛倒的。如果你打算支持早期的Opera版本，就需要使用瀏覽器檢測技術來確定實際的值，如下面的例子所示：

EventUtil.addHandler(document, "mousewheel", function () {event = EventUtil.getEvent(event);var delta = (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);alert(delta); });

Firefox支持一個名為DOMMouseScroll的類似事件，也是在鼠標滾動時觸發。與mousewheel事件一樣，DOMMouseScroll也被視為鼠標事件，因而包含與鼠標事件有關的所有屬性。而有關鼠標滾輪的信息則保存在detail屬性中，當向前滾動鼠標滾輪時，這個屬性的值是-3的倍數，當向后滾動鼠標滾輪時，這個屬性的值是3的倍數。

可以將DOMMouseScroll事件天驕到頁面中的任何元素，而且該事件會冒泡的window對象。因此，可以像下面這樣針對這個事件添加事件處理程序：

EventUtil.addHandler(window, "DOMMouseScroll", function (event) {event = EventUtil.getEvent(event);alert(event.detail); })

這個簡單的事件處理程序會在鼠標滾輪滾動時顯示detail屬性的值。
若要給出跨瀏覽器的解決方案，第一步就是創建一個能夠取得鼠標滾輪增量值（delta）的方法。下面是我們添加到EventUtil對象中的這個方法：

var EventUtil = {getWheelDelta: function (event) {if (event.wheelDelta) {return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);} else {return -event.detail * 40;}} };

這里，getWheelDelta()方法首先檢測了事件對象是否包含wheelDelta屬性，如果是則通過瀏覽器檢測代碼確定正確的值。如果wheelDelta不存在，則假設相應的值保存在detail屬性中。由于Firefox的值有所不同，因此首先要將這個值的符號反向，然后再乘以40，就可以保證與其它瀏覽器的值相同了。有這個方法之后，就可以將相同的事件處理程序指定給mousewheel和DOMMouseScroll事件了，例如：

function handleMouseWheel(event) {event = EventUtil.getEvent(event);var delta = EventUtil.getWheelDelta(even);alert(delta); } EventUtil.addHandler(document, "mousewheel", handleMouseWheel); EventUtil.addHandler(document, "mousewheel", handleMouseWheel);

下面是跨瀏覽器環境下的解決方案：

var client = function () {var engine = {//呈現引擎ie: 0,gecko: 0,webkit: 0,khtml: 0,opera: 0,//具體版本號ver: null};var browser = {//瀏覽器ie: 0,firefox: 0,konq: 0,opera: 0,chrome: 0,safari: 0,//具體版本號ver: null};var system = {win: false,mac: false,x11: false};//在此檢測呈現引擎、平臺設備return {engine: engine,browser: browser,system: system};}(); var EventUtil = {getEvent: function (event) {return event ? event : window.event;},addHandler: function (element, type, handler) {if (element.addEventListener) {element.addEventListener(type, handler, false);} else if (element.attachEvent) {element.attachEvent("on" + type, handler);} else {element["on" + type] = handler;}},getWheelDelta: function (event) {if (event.wheelDelta) {return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);} else {return -event.detail * 40;}} };function handleMouseWheel(event) {event = EventUtil.getEvent(event);var delta = EventUtil.getWheelDelta(event);alert(delta); } EventUtil.addHandler(document, "mousewheel", handleMouseWheel); EventUtil.addHandler(document, "DOMMouseScroll", handleMouseWheel);

在iPhone和iPodTouch中，如果兩個手指同時放在屏幕上，而且頁面因手指移動而滾動，也會觸發mousewheel事件。

轉載于:https://www.cnblogs.com/jQing/archive/2012/06/14/2548869.html

總結

以上是生活随笔為你收集整理的鼠标滚轮(mousewheel)和DOMMouseScroll事件 （转载）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。