【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

 

转载于:https://www.cnblogs.com/huashengweilong/p/10961774.html