時代的印記，在W3C規範尚未形成，ECMAScript標準尚未建立的上古時代，各家瀏覽器廠商都形成了各自對JS的理解，繼而各自打下各自的江山，建立各自的帝國。

正是因為各家瀏覽器對JS的理解和實現不同，繼而導致了後續的各種不一致，逼得可憐的前端人不得不去相容各種不同的瀏覽器。今次話題：WebKit核心瀏覽器、Gecko核心瀏覽器的滑鼠滾輪事件相容

1、判定瀏覽器所屬

既然是瀏覽器的相容，那麼肯定要先知道你所用的瀏覽器是什麼瀏覽器

function getBrowserType() {
  var userAgent = navigator.userAgent;
  alert(userAgent);
  
 
var isOpera = userAgent.indexOf("Opera") > -1; // Opera瀏覽器
  var isIE10orLess =
    userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; // IE10以下
  var isIE11 =
    userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1; // IE11
  var isFirefox = userAgent.indexOf("Firefox") > -1; //
 
 火狐瀏覽器
  var isSafari =
    userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") === -1; // Safari瀏覽器
  var isChrome = // 谷歌瀏覽器
    userAgent.indexOf("Chrome") > -1 &&
    userAgent.indexOf("Safari") > -1 &&
    userAgent.indexOf("Edge") === -1;
  // Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
 

  var isEdge = userAgent.indexOf("Edge") > -1 && !isIE10orLess; // Edge瀏覽器

  var trident = userAgent.indexOf("Trident") > -1; //IE核心
  var presto = userAgent.indexOf("Presto") > -1; //opera核心
  var webKit = userAgent.indexOf("AppleWebKit") > -1; //蘋果、谷歌核心
  var gecko =
    userAgent.indexOf("Gecko") > -1 && userAgent.indexOf("KHTML") === -1; //火狐核心
  var mobile = !!userAgent.match(/AppleWebKit.*Mobile.*/); //是否為移動終端
  var ios = !!userAgent.match(/\(i[^;]+;( userAgent;)? CPU.+Mac OS X/); //ios終端
  var android =
    userAgent.indexOf("Android") > -1 || userAgent.indexOf("Adr") > -1; //android終端
  var iPhone = userAgent.indexOf("iPhone") > -1; //是否為iPhone或者QQHD瀏覽器
  var iPad = userAgent.indexOf("iPad") > -1; //是否iPad
  var webApp = userAgent.indexOf("Safari") === -1; //是否web應該程式，沒有頭部與底部
  var weixin = userAgent.indexOf("MicroMessenger") > -1; //是否微信 （2015-01-22新增）
  var qq = userAgent.match(/\sQQ/i) === " qq"; //是否QQ
  var windowPhone = userAgent.indexOf("Windows Phone") > -1;

  if (isIE10orLess) {
    var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
    reIE.test(userAgent);
    var fIEVersion = parseFloat(RegExp["$1"]);
    if (fIEVersion === 7) {
      return "IE7";
    } else if (fIEVersion === 8) {
      return "IE8";
    } else if (fIEVersion === 9) {
      return "IE9";
    } else if (fIEVersion === 10) {
      return "IE10";
    } else {
      return "0";
    } //IE版本過低
  }
  if (isIE11) {
    return "IE11";
  }
  if (isFirefox) {
    return "Firefox";
  }
  if (isOpera) {
    return "Opera";
  }
  if (isSafari) {
    return "Safari";
  }
  if (isChrome) {
    return "Chrome";
  }
  if (isEdge) {
    return "Edge";
  }
}

2、滑鼠滾輪事件相容

function addMouseWheel(obj,fn,preventDefault){
    //新增繫結
    if(window.navigator.userAgent.toLowerCase().indexOf("firefox") != -1){
        obj.addEventListener("DOMMouseScroll",fnWheel,false);  
    } else {
        obj.onmousewheel = fnWheel;
    }
     
    function fnWheel(ev){
        var oEvent = ev || event;
        var bDown = true;//下
        if(oEvent.wheelDelta){//ie chrome
            console.log(oEvent.wheelDelta)
            bDown = oEvent.wheelDelta > 0 ? false:true;
        } else {//ff
            console.log(oEvent.detail)
            bDown = oEvent.detail > 0 ? true:false;
        }
        (typeof fn == "function") && fn(bDown);
        if(preventDefault){
            oEvent.preventDefault && oEvent.preventDefault();
            return false;
        }
    }
}