了解JS滾輪事件(mousewheel/DOMMouseScroll)

JS滾輪事件(mousewheel/DOMMouseScroll)了解

一、學無止境、溫故知新

//zxx: 本段與技術無關，一些很個人的吐槽，可以跳過
已經沒有了小學生時代過目不忘的記憶力了，很多自己折騰的東西、接觸的東西，短短1年之後就全然不記得了。比方說，完全記不得獲取元素與頁面距離的方法(getBoundingClientRect)，或者是不記得現代瀏覽器下觸發DOM自訂事件的方法(dispatchEvent). 顯然，適當的溫習，翻閱以前的東西，或者自己空餘時間處理相關的東西還是有必要的。其實，細想，東西記不住是自己自身原因，在折騰的時候就沒有想方設法牢記（而不是透過反覆使用記住）。比方說getBoundingClientRect就是「得到客戶端矩形邊界」的意思，或是用邪惡記法來記住「割(g)逼(b)艹(c)軟(r)」。 dispatchEvent方法使用“3步驟”，“創建(createEvent)-初始(init*Event)-分派(dispatchEvent)”。

學習的腳步不能停止。一站到底的那些「變態」們也有不知道的東西，顯然，我們這些草輩，尤其年輕的自己，不知道的更多。誰年輕的時候沒有過或多或少 的迷茫，問自己“路在何方”，問自己“該做哪個方向”，無論你選擇的是什麼，學習的腳步是不能停止的。堅持堅持著，路自然就會清晰，你就會知道接下來該怎麼走了。只怕畏首畏尾，得過且過，年輕就是資本，義無反顧前行吧。

我憑著興趣走上現在的道路，完全是興趣學習（我喜歡這些，我要學），不是職業學習（做前端需要什麼，我就去學什麼）。工作的這些年，技術、產品的自 我沉浸不知不覺限制了自己的眼界，好在意識到問題的存在其實已經解決了問題的一半。這裡之所以會說這些是想提醒自己，萬萬不可矯枉過正，技術、產品的學習 還是主要的，只是要多多抬頭看看辦公室之外的世界（不是刷微博獲得的淺認識）。

昨天機緣巧合遇到“滾輪事件”，以前折騰“自定義滾動條”時候使用過滑鼠滾輪事件，不過這是基於MooTools已經兼容好的mousewheel事件實現的，如果要說出其中的實作機制，瀏覽器相容差異等，就傻眼了。學無止境，因此，查閱之，實踐之，整理之。

二、相容差異大全

滾輪事件的兼容性差異有些不拘一格，不是以往的IE8-派和其他派，而是FireFox派和其他派。

包括IE6在內的瀏覽器是使用onmousewheel，而FireFox瀏覽器一個人使用DOMMouseScroll. 經自己測試，即使現在FireFox 19下，也是不識onmousewheel。

一個最簡單的使用差異（body捲軸由內部一定高div撐開）：

document.body.onmousewheel = function(event) {
    event = event || window.event;
    console.dir(event);
};

document.body.addEventListener("DOMMouseScroll", function(event ) {
    console.dir(event);
});

以上輸出差異請見下方（IE7, IE10, Chrome, 以及FireFox，滑鼠向下捲動， win7）（可點選此頁面單獨查看表格內容）：

三、相容的滾輪事件方法

知己知彼百戰百勝，知道了差異就知道如何處理這些差異。畢竟不是寫JS函式庫，我們這裡只處理滾動方向這塊的差異。

整合我們通常事件新增方法，於是有（下程式碼代號為addEvent.js）：

/**
 * 简易的事件添加方法
 */
 define(function(require, exports, module) {
    exports.addEvent = (function(window, undefined) {        
        var _eventCompat = function(event) {
            var type = event.type;            if (type == 'DOMMouseScroll' || type == 'mousewheel') {
                event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
            }
            //alert(event.delta);
            if (event.srcElement && !event.target) {
                event.target = event.srcElement;    
            }
            if (!event.preventDefault && event.returnValue !== undefined) {
                event.preventDefault = function() {
                    event.returnValue = false;
                };
            }            /* 
               ......其他一些兼容性处理 */
            return event;
        };
        if (window.addEventListener) {
            return function(el, type, fn, capture) {                if (type === "mousewheel" && document.mozHidden !== undefined) {
                    type = "DOMMouseScroll";
                }
                el.addEventListener(type, function(event) {
                    fn.call(this, _eventCompat(event));
                }, capture || false);
            }
        } else if (window.attachEvent) {
            return function(el, type, fn, capture) {
                el.attachEvent("on" + type, function(event) {
                    event = event || window.event;
                    fn.call(el, _eventCompat(event));    
                });
            }
        }
        return function() {};    
    })(window);        
});

於是，我們就可以很從容使用mousewheel事件了。例如：

addEvent(dom, "mousewheel", function(event) {
    if (event.delta < 0) { alert("鼠标向上滚了！"); }
});

相關程式碼實作如下，下面這個展示的就是平滑移動的核心程式碼們（代號為slide.js）：

/**
 * 简易的列表左右滑动切换效果
 * 鼠标事件是关键，因此，一些数值写死在方法中，纯测试用
 */
 define(function(require, exports, module) {    var Event = require("/study/201304/addEvent.js");
    var _move = function(ele, to, from) {        // 动画实现
        // ...
    };
    return {
        index: 0,
        visible: 4,
        init: function(box) {            // box指滚动的列表容器
            var self = this
              , length = box.getElementsByTagName("li").length;            Event.addEvent(box.parentNode, "mousewheel", function(event) {
                 if (event.delta > 0 && self.index > 0) {                    // 往上滚
                    self.index--;
                 } else if (event.delta < 0 && self.index < length - self.visible) {                     // 往下
                     self.index++;                     
                 } else {
                    return; 
                 }
                 _move(box, -1 * self.index * 140);    
              
                 event.preventDefault();
            });
        }
    };
});

原理很簡單，滾輪改變，索引改變，也就是清單的最終位置改變，動畫到目標位置即可。

然後，demo頁面使用seajs簡單呼叫就可以了！

var $ = function(id) {
    return document.getElementById(id);
};
seajs.use("/study/201304/slide.js", function(slide) {
    slide.init($("slideBox"));
});

就結束了，一些具體細節，例如關於HTML部分，或是動畫的實作等，可以去demo等查看程式碼展示。

不過從效果來看，IE6以及IE7瀏覽器下的滾動並沒有hold頁面的滾動條，多番其他嘗試也是如此，希望可以有相關經驗的同行指點下，優化IE7/IE7瀏覽器下的體驗效果。

原本還想再增加一個自訂捲軸的demo的，一看時間，我勒個去，已經1:11:11了，好不吉利的數字啊，看了下程式設計師運勢萬年曆，今天不適宜寫demo。於是，結語睡覺。

推薦教學：《JS基礎教學》

以上是了解JS滾輪事件(mousewheel/DOMMouseScroll)的詳細內容。更多資訊請關注PHP中文網其他相關文章！