DOM节点内监听滚动事件(兼容Firefox、IE)

整理公司老项目的时候，发现在Firefox浏览器中，滚动监听加载下一页的功能没有实现。于是查看了代码逻辑才知道，只使用了mousewheel事件，但火狐无法识别该事件，并且火狐有自己的滚动事件DOMMouseScroll。

1、 我们首先来整理一下滚动事件在Firefox和其他浏览器的区别：

1.1 事件名不同

其他浏览器的事件名为： `mousewheel`

document.addEventListener('mousewheel', handlerMouseWheel)


Firefox的事件名为：     `DOMMouseScroll`

document.addEventListener('DOMMouseScroll', handlerMouseWheel)

1.2 判断滚轮的方向和值不同

 其他浏览器： 向上滚动为正值(+120)、向下滚动为负值(-120)

 Firefox：   向上滚动为负值(-5)，向下滚动为正值(+5)

1.3 event对象不同

 其他浏览器: 滚轮滚动的值在 event 对象中的 `wheelDelta` 属性中
 
 Firefox：  滚轮滚动的值在 event 对象中的 `detail` 属性中

注意： 一般为了统一 其他浏览器 和 Firefox 浏览器 滚动方向和滚动值 的一致性, 一般我们会对 Firefox 的 滚动值取反 并 放大24倍 ，以保证Firefox浏览器的鼠标滚轮滚动方向和滚动距离与其他浏览器一样的效果。

这里封装多种浏览器滚轮滚动方向和距离的方法（兼容Firefox浏览器）：

function getWheelDelta(event) {
    // 对 Firefox 滚动值取反并放大24倍
    return event.wheelDelta || (-event.detail * 24)
}

2、统一封装多浏览器对滚动事件的监听（兼容Chrome、IE、Firefox等）

/**
 * @description: 多种浏览器滚动事件监听封装
 * @param {*} DomObj 需要滚动的DOM元素对象
 * @param {*} fn  滚动时执行的方法
 * @return {*}
 */
export function mouseWheelFn (DomObj , fn) {

  // 处理滚动回调事件以及阻止默认事件
  function fnWheel (ev) {
    let oEvent = ev || event
    
    // 默认 false 即不是Firefox， oEvent.detail > 0 为 Firefox
    let bDown = false
    bDown = oEvent.wheelDelta ? oEvent.wheelDelta < 0 : (oEvent.detail > 0)
    
    // 处理调事件
    fn && fn(oEvent, bDown)
    
    // 阻止默认事件
    oEvent.preventDefault && oEvent.preventDefault()
    return false
  }
  // 判断是否是Firefox浏览器
  if (window.navigator.userAgent.indexOf('Firefox') !== -1) {
    
    // 是，执行 addEventListener 监听 DOMMouseScroll 事件
    DomObj .addEventListener( 'DOMMouseScroll',  fnWheel,  false)
    
  } else {
  
    // 不是，可能是IE、Chrome, 需要对监听方法做兼容
    addEventFn( DomObj ,  'mousewheel',  fnWheel)
  }
  
}

/**
 * @description: 判断浏览器是否有 addEventListener 方法兼容
 * @param {*} DomObj 需要滚动的DOM元素对象
 * @param {*} eventName 执行滚动的事件名
 * @param {*} fn 滚动时执行的方法
 * @return {*}
 */
export function addEventFn (DomObj, eventName, fn) {
  // 判断浏览器是否有 addEventListener 方法
  if (DomObj.addEventListener) {
  
    DomObj.addEventListener(eventName, fn, false)
    
  } else {
  
    DomObj.attachEvent('on' + eventName, fn)
    
  }
}