【JS】【24】監聽鼠標滾輪事件

前言：我需要監聽鼠標是向上還是向下滾動，結果在瀏覽器兼容上碰壁了，參考博客分析得挺好的

正文：

1，在各個瀏覽器的表現

瀏覽器	事件監聽	滾輪事件	滾動方向
Chrome	addEventListener	onmousewheel	event.wheelDelta	正值向上，負值向下
IE	attachEvent	onmousewheel	event.wheelDelta
Firefox	addEventListener	DOMMouseScroll	event.detail	正值向下，負值向上

2，代碼

window.onload = function () {
        var oDiv = document.getElementById('div1');
 
        function onMouseWheel(ev) {/*當鼠標滾輪事件發生時，執行一些操作*/
            var ev = ev || window.event;
            var down = true; // 定義一個標志，當滾輪向下滾時，執行一些操作
                down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0;
            if(down){
                oDiv.style.height = oDiv.offsetHeight+10+'px';
            }else{
                oDiv.style.height = oDiv.offsetHeight-10+'px';
            }
            if(ev.preventDefault){/*FF 和 Chrome*/
                ev.preventDefault();// 阻止默認事件
            }
            return false;
        }
        addEvent(oDiv,'mousewheel',onMouseWheel);
        addEvent(oDiv,'DOMMouseScroll',onMouseWheel);
     }
    function addEvent(obj,xEvent,fn) {
        if(obj.attachEvent){
            obj.attachEvent('on'+xEvent,fn);
        }else{
            obj.addEventListener(xEvent,fn,false);
        }
    }

參考博客：

JS事件-鼠標滾輪事件 - 每天進步一點點 - CSDN博客
https://blog.csdn.net/u014205965/article/details/46045099