学习 JS滚轮事件(mousewheel/DOMMouseScroll)

学习 JS滚轮事件(mousewheel/DOMMouseScroll)

1-1 滚轮事件兼容性的差异
   IE，chrome，safari 浏览器都使用 onmousewheel, 只有firefox浏览器使用 DOMMouseScroll 事件，一个最简单的测试demo如下：
HTML代码如下：

<div style="height:2000px"></div>
页面滚动条滚动的时候，使用js去监听事件如下：

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

document.body.addEventListener('DOMMouseScroll', function(event) {
  console.log(222);
  console.log(event);
});

上面代码可以看到，safari和chrome都使用 onmousewheel 事件监听，只有firefox使用 DOMMouseScroll 事件监听。

下面我们来看看 safari，chrome和firefox 浏览器各个属性差异性如下：

属性名：              Firefox              chrome                     safari
type                 DOMMouseScroll       mousewheel                 mousewheel
formElement          没有该属性             null                      null
toElement            没有该属性            [object HTMLDivElement]   [object HTMLDivElement] 
wheelDelta           没有该属性            -120(向下滚动)              -12(向下滚动)
srcElement           没有该属性            [object HTMLDivElement]   [object HTMLDivElement]
screenX              353                  406                       872
screenY              278                  284                       281
clientX              353                  406                       629 
clientY              140                  164                       219
offsetX              0                    398                       621
offsetY              0                    200                       211
layerX               353                  406                       629
layerY               140                  208                       219
pageX                353                  406                       629
pageY                140                  208                       219
which                1                    0                          1
detail               1                    0                          0
currentTarget        null                 null                      null
target         [object HTMLDivElement]    [object HTMLDivElement]   [object HTMLDivElement]
wheelDeltaY         没有该属性              -120                       -12
wheelDeltaX         没有该属性              0                           0
returnValue         没有该属性              true                        true
preventDefault      没有该属性              没有该属性                    没有该属性

注意（目前测试使用的是Mac系统，window系统好久没有使用过了~）
如上的一些属性对比，可以看到，除了firefox以外，chrome上下滚动式使用 wheelDelta(向下滚动，该值为-120，向上滚动该值为120)；safari上下滚动也使用 wheelDelta(向下滚动，该值为-12，向上滚动该值为12)，对于firefox浏览器或 Opera浏览器而言，判断鼠标滚动方向的属性为 event.detail, 向下滚动为1，向上滚动为-1;

注意：safari滚动一圈的话(向下滚动值为-12，向上滚动值为12，但是如果滚动稍微快点的话，会多滚动几圈，那么该值即将变大，滚动几圈，那么就是 -12 * 几圈)。

1-2 兼容滚轮事件的方法
知道上面的一些差异后，我们现在可以封装一个兼容 safari，chrome和firefox的函数了；代码如下：

var addEvent = (function(window, undefined) {
  var _event = function(event) {
    var type = event.type;
    if (type === 'DOMMouseScroll' || type === 'mousewheel') {
      console.log(event)
      event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0);
    }
    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.mozFullScreen !== undefined) {
        type = "DOMMouseScroll";
      }
      el.addEventListener(type, function(event) {
        fn.call(this, _event(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, _event(event));
      });
    }
  }
})(window);

测试使用方法如下：

addEvent(window, "mousewheel", function(event) {
  console.log(event.delta);
  if(event.delta < 0) {
    console.log('鼠标向下滚动了');
  }
});