Web前端探索之滾輪事件（wheelEvent）

標籤：span   console   ges   開發人員   針對   listener   分析   str   部分   

　　前段時間使用canvas做捲軸控制項，添加滾輪事件時，查閱了一些資料，發現大都是文檔描述或簡單樣本，對於開發人員還是不夠。wheelEvent對象中的一些屬性（比如wheelDelta、detail等）雖然官方文檔有完整描述，但部分或大部分瀏覽器廠商並沒有（真正）實現，這就很容易誘導大家錯誤使用。所以我針對當前常用瀏覽器重新測試了一下。

 

測試目標：探索wheelEvent事件中常用屬性的有效性，垂直步進演算法（滑動幅度）以及與電腦個人化的關聯

測試環境：Windows作業系統，Firefox54、Chrome59、IE9、IE10、IE11、Edge瀏覽器

測試屬性：deltaY、detail、wheelDelta

電腦個人化：作業系統滑鼠滑輪垂直行數n（預設值：3）

輔助關聯參數：瀏覽器視窗高度H（測試目標為body滾動效果）用來驗證deltaY的推導公式

測試代碼：

 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);

 

測試結果：

結果分析：

1、Firefox有效屬性deltaY，正值向下滾動，絕對值為作業系統滑鼠滑輪垂直行數設定；

2、IE系列有效屬性deltaY，正值向下滾動，絕對值為滾動幅度（像素數，計算方式：視窗高度×滑鼠滾輪垂直行數÷20）

3、Edge有效屬性deltaY，同IE系列，並且支援wheelDelta屬性（向上120，向下-120，但為常量，只能判斷方向，與滾輪速率無關，有種被欺騙的感覺。。。）

4、Chrome有效屬性deltaY，正值向下滾動，絕對值為滾動幅度（像素數，計算方式：100×滑鼠滾輪垂直行數÷3）並且支援wheelDelta,與Edge一樣，也是假值；

5、測試的幾款瀏覽器deltaY都與作業系統滑鼠滾輪垂直行數正相關；

6、IE系列與Edge瀏覽器deltaY與捲軸所在dom視窗高度相關（瀏覽器以當前捲軸所在dom視窗可容20行，來動態計算行高），Chrome與視窗高度無關；

 結論：

1、可靠屬性：deltaY，方向判斷方法一致（正值向下滾動，負值向上滾動），與作業系統滑鼠設定有關聯，但需注意絕對值演算法不統一

2、無用屬性：detail，wheelDelta（未實現，即使Chrome與Edge也是假值，這與mdn、w3c等文檔描述有差異，但看網路相關分享、jquery控制項等卻發現很多人都在使用。。。）

3、功能方面：Firefox能直觀反映滾動行數，但不能直觀與瀏覽器預設捲軸保持同步；其他幾組瀏覽器則恰好相反；

4、個人建議：個人認為wheelDelta的最初設計思想很好，電腦滑鼠滾輪垂直行數預設值是3，wheelDelta預設值120，即單行行高40px，即使使用者電腦做了個人化，像素值也不會出現迴圈小數，避免了Chrome的deltaY設計缺陷，有利於行業正常化，所以建議各瀏覽器廠商能完整支援wheelDelta這一屬性。

應用領域：

捲軸控制項滾輪事件設計：滾輪效果應該有效使用電腦個人化

方案一、固定步距（滾動幅度）：按推導公式計算滑鼠滾動行數n值，設定固定行高H，幅度=n×H

方案二、嵌入式（與瀏覽器預設效果同步）：Firefox使用body字型大小作為行高H，幅度=deltaY×H；其他瀏覽器，幅度=deltaY

 

Web前端探索之滾輪事件（wheelEvent）