JavaScript鼠标滚轮事件

JavaScript鼠标滚轮事件

IE6.0首先实现了鼠标的滚轮事件，其良好的交互效果得到认可，随后Opera、chrome、safari等主流浏览器都实现了该效果，不过存在着很大的兼容问题。

大多数浏览器支持mousewheel事件操作，它可以在任何元素上触发，最终冒泡到document或window对象；而在Firefox中，支持的是另外一种事件——DOMMouseScroll，其中最为特殊的是它必须用addEventListener方法实现，故一般进行如下处理

1      //设触发的函数为fn
2      if(oDiv.addEventListener) {
3            oDiv.addEventListener('DOMMouseScroll',fn,false);
4        }
5      oDiv.onmousewheel = fn;

mousewheel触发事件会有一个特殊的事件属性——wheelDelta，当用户向前滚动是，它的值是120的倍数，向后滚动时，它的值是-120的倍数。不过在Opera9.5之前的版本中，正负号是颠倒的；在Firefox中，并没有wheelDelta属性，而是detail属性，与wheelDelta相比较，它不仅正负号颠倒，其值是3的倍数。为了兼容正负号颠倒的问题，可以采取设定布尔值的解决方法。

//这是一个通过鼠标滚轮改变div高度的函数
          function fn(ev) {
            var ev = ev || event;
            var b = true;
            if( ev.wheelDelta ) {
                b = ev.wheelDelta>0?true:false;
            } else {
                b = ev.detail<0?true:false;
            }
           
            if( b ) {
                oDiv.style.height = oDiv.offsetHeight - 10 +'px';
            } else {
                oDiv.style.height = oDiv.offsetHeight + 10 +'px';
            }
        }

在该函数中，向上滚动b为true，向下滚动b为false。

然而，如果页面有滚动条的话，在div上滚动滚轮的时候，会触发浏览器的默认事件。通常，我们用return false处理，可在addEventListener中，需要使用preventDefault函数来消除浏览器的默认事件。

//在上述fn函数的末尾加消除浏览器默认事件的操作
        if( ev.preventDefault ) {
                ev.preventDefault();
            }

            return false;

以上可以解决鼠标滚轮事件带来的大部分兼容问题。

本文永久更新链接地址：https://www.bkjia.com/Linux/2018-03/151410.htm