摘要：下面正式推薦大神的博文前段時(shí)間使用做滾動(dòng)條控件，添加滾輪事件時(shí)，查閱了一些資料，發(fā)現(xiàn)大都是文檔描述或簡(jiǎn)單示例，對(duì)于開(kāi)發(fā)者還是不夠。一測(cè)試目標(biāo)探索事件中常用屬性的有效性，垂直步進(jìn)算法滑動(dòng)幅度以及與電腦個(gè)性化設(shè)置的關(guān)聯(lián)。

最近在用VUE寫(xiě)一個(gè)后臺(tái)管理系統(tǒng)，頂部標(biāo)簽頁(yè)涉及鼠標(biāo)滾輪事件，由于每個(gè)瀏覽器對(duì)滾輪事件的處理方式不一樣，個(gè)人對(duì)這個(gè)又不懂，折騰了很久，參考了大神的代碼，也把百度翻爛了，找到了一篇陳舊的博文（其實(shí)是主題很土，發(fā)布時(shí)間未知）。寫(xiě)得非常清楚，解決了我的問(wèn)題。
先看看我標(biāo)簽頁(yè)的界面：

如果打開(kāi)的標(biāo)簽超過(guò)滾動(dòng)區(qū)域?qū)挾?，?huì)顯示滾動(dòng)條，支持鼠標(biāo)滾輪左右滾動(dòng)。這里涉及wheelEvent的2個(gè)屬性：wheelDelta 和 deltaY，后面轉(zhuǎn)載的博文會(huì)詳細(xì)測(cè)試。
首先在MDN網(wǎng)站看到了官方概念：

這里獲得2個(gè)信息：
①傳統(tǒng)的mousewheel事件已經(jīng)充用，請(qǐng)使用wheel事件。
②不要通過(guò)判斷滾輪方向來(lái)推斷文檔滾動(dòng)方向。
下面正式推薦大神的博文：

前段時(shí)間使用canvas做滾動(dòng)條控件，添加滾輪事件時(shí)，查閱了一些資料，發(fā)現(xiàn)大都是文檔描述或簡(jiǎn)單示例，對(duì)于開(kāi)發(fā)者還是不夠。wheelEvent對(duì)象中的一些屬性（比如wheelDelta、detail等）雖然官方文檔有完整描述，但部分或大部分瀏覽器廠商并沒(méi)有（真正）實(shí)現(xiàn)，這就很容易誘導(dǎo)大家錯(cuò)誤使用。所以我針對(duì)當(dāng)前常用瀏覽器重新測(cè)試了一下。

探索wheelEvent事件中常用屬性的有效性，垂直步進(jìn)算法（滑動(dòng)幅度）以及與電腦個(gè)性化設(shè)置的關(guān)聯(lián)。

Windows操作系統(tǒng)，F(xiàn)irefox54、Chrome59、IE9、IE10、IE11、Edge瀏覽器。

deltaY、detail、wheelDelta。

電腦個(gè)性化設(shè)置：操作系統(tǒng)鼠標(biāo)滑輪垂直行數(shù)n（默認(rèn)值：3）

輔助關(guān)聯(lián)參數(shù)：瀏覽器窗口高度H用來(lái)驗(yàn)證deltaY的推導(dǎo)公式

測(cè)試代碼：

var onwheel = function(e){
     var _log = "",
         _ie9 = navigator.userAgent.indexOf("MSIE 9.0") > 0,
         _h = _ie9 ? window.innerHeight : document.body.clientHeight;  //兼容IE9

     _log += "deltaY:" + e.deltaY;
     _log += "|wheelDelta:" + e.wheelDelta;
     _log += "|detail:" + e.detail;   
     _log += "|H:" + _h;

　　　console.log(_log);
};

document.addEventListener("wheel", onwheel, false);

測(cè)試結(jié)果：

1、Firefox有效屬性deltaY，正值向下滾動(dòng)，絕對(duì)值為操作系統(tǒng)鼠標(biāo)滑輪垂直行數(shù)設(shè)置；

2、IE系列有效屬性deltaY，正值向下滾動(dòng)，絕對(duì)值為滾動(dòng)幅度（像素?cái)?shù)，計(jì)算方式：窗口高度×鼠標(biāo)滾輪垂直行數(shù)÷20）

3、Edge有效屬性deltaY，同IE系列，并且支持wheelDelta屬性（向上120，向下-120，但為常量，只能判斷方向，與滾輪速率無(wú)關(guān)，有種被欺騙的感覺(jué)。。。）

4、Chrome有效屬性deltaY，正值向下滾動(dòng)，絕對(duì)值為滾動(dòng)幅度（像素?cái)?shù)，計(jì)算方式：100×鼠標(biāo)滾輪垂直行數(shù)÷3）并且支持wheelDelta,與Edge一樣，也是假值；

5、測(cè)試的幾款瀏覽器deltaY都與操作系統(tǒng)鼠標(biāo)滾輪垂直行數(shù)正相關(guān)；

6、IE系列與Edge瀏覽器deltaY與瀏覽器窗口高度相關(guān)（瀏覽器以當(dāng)前窗口可容20行，來(lái)動(dòng)態(tài)計(jì)算行高），Chrome與窗口高度無(wú)關(guān)；

1、可靠屬性：deltaY，方向判斷方法一致（正值向下滾動(dòng)，負(fù)值向上滾動(dòng)），與操作系統(tǒng)鼠標(biāo)設(shè)置有關(guān)聯(lián)，但需注意絕對(duì)值算法不統(tǒng)一

2、無(wú)用屬性：detail，wheelDelta（未實(shí)現(xiàn)，即使Chrome與Edge也是假值，這與mdn、w3c等文檔描述有差異，但看網(wǎng)絡(luò)相關(guān)分享、jquery控件等卻發(fā)現(xiàn)很多人都在使用。。。）

3、功能方面：Firefox能直觀反映滾動(dòng)行數(shù)，但不能直觀與瀏覽器默認(rèn)滾動(dòng)條保持同步；其他幾組瀏覽器則恰好相反；

4、個(gè)人建議：個(gè)人認(rèn)為wheelDelta的最初設(shè)計(jì)思想很好，電腦鼠標(biāo)滾輪垂直行數(shù)默認(rèn)值是3，wheelDelta默認(rèn)值120，即單行行高40px，即使用戶電腦做了個(gè)性化設(shè)置，像素值也不會(huì)出現(xiàn)循環(huán)小數(shù)，避免了Chrome的deltaY設(shè)計(jì)缺陷，有利于行業(yè)規(guī)范化，所以建議各瀏覽器廠商能完整支持wheelDelta這一屬性。

滾動(dòng)條控件滾輪事件設(shè)計(jì)：滾輪效果應(yīng)該有效使用電腦個(gè)性化設(shè)置

方案一、固定步距（滾動(dòng)幅度）：按推導(dǎo)公式計(jì)算鼠標(biāo)滾動(dòng)行數(shù)n值，設(shè)定固定行高H，幅度=n×H

方案二、嵌入式（與瀏覽器默認(rèn)效果同步）：Firefox使用body字號(hào)作為行高H，幅度=deltaY×H；其他瀏覽器，幅度=deltaY

下面是代碼，自行參考：