摘要:下面正式推薦大神的博文前段時間使用做滾動條控件,添加滾輪事件時,查閱了一些資料,發(fā)現(xiàn)大都是文檔描述或簡單示例,對于開發(fā)者還是不夠。一測試目標(biāo)探索事件中常用屬性的有效性,垂直步進(jìn)算法滑動幅度以及與電腦個性化設(shè)置的關(guān)聯(lián)。
最近在用VUE寫一個后臺管理系統(tǒng),頂部標(biāo)簽頁涉及鼠標(biāo)滾輪事件,由于每個瀏覽器對滾輪事件的處理方式不一樣,個人對這個又不懂,折騰了很久,參考了大神的代碼,也把百度翻爛了,找到了一篇陳舊的博文(其實是主題很土,發(fā)布時間未知)。寫得非常清楚,解決了我的問題。
先看看我標(biāo)簽頁的界面:
如果打開的標(biāo)簽超過滾動區(qū)域?qū)挾龋瑫@示滾動條,支持鼠標(biāo)滾輪左右滾動。這里涉及wheelEvent的2個屬性:wheelDelta 和 deltaY,后面轉(zhuǎn)載的博文會詳細(xì)測試。
首先在MDN網(wǎng)站看到了官方概念:
這里獲得2個信息:
①傳統(tǒng)的mousewheel事件已經(jīng)充用,請使用wheel事件。
②不要通過判斷滾輪方向來推斷文檔滾動方向。
下面正式推薦大神的博文:
前段時間使用canvas做滾動條控件,添加滾輪事件時,查閱了一些資料,發(fā)現(xiàn)大都是文檔描述或簡單示例,對于開發(fā)者還是不夠。wheelEvent對象中的一些屬性(比如wheelDelta、detail等)雖然官方文檔有完整描述,但部分或大部分瀏覽器廠商并沒有(真正)實現(xiàn),這就很容易誘導(dǎo)大家錯誤使用。所以我針對當(dāng)前常用瀏覽器重新測試了一下。一、測試目標(biāo)
探索wheelEvent事件中常用屬性的有效性,垂直步進(jìn)算法(滑動幅度)以及與電腦個性化設(shè)置的關(guān)聯(lián)。
二、測試環(huán)境Windows操作系統(tǒng),F(xiàn)irefox54、Chrome59、IE9、IE10、IE11、Edge瀏覽器。
三、測試屬性deltaY、detail、wheelDelta。
電腦個性化設(shè)置:操作系統(tǒng)鼠標(biāo)滑輪垂直行數(shù)n(默認(rèn)值:3)
輔助關(guān)聯(lián)參數(shù):瀏覽器窗口高度H用來驗證deltaY的推導(dǎo)公式
測試代碼:
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);
測試結(jié)果:
四、結(jié)果分析1、Firefox有效屬性deltaY,正值向下滾動,絕對值為操作系統(tǒng)鼠標(biāo)滑輪垂直行數(shù)設(shè)置;
2、IE系列有效屬性deltaY,正值向下滾動,絕對值為滾動幅度(像素數(shù),計算方式:窗口高度×鼠標(biāo)滾輪垂直行數(shù)÷20)
3、Edge有效屬性deltaY,同IE系列,并且支持wheelDelta屬性(向上120,向下-120,但為常量,只能判斷方向,與滾輪速率無關(guān),有種被欺騙的感覺。。。)
4、Chrome有效屬性deltaY,正值向下滾動,絕對值為滾動幅度(像素數(shù),計算方式:100×鼠標(biāo)滾輪垂直行數(shù)÷3)并且支持wheelDelta,與Edge一樣,也是假值;
5、測試的幾款瀏覽器deltaY都與操作系統(tǒng)鼠標(biāo)滾輪垂直行數(shù)正相關(guān);
6、IE系列與Edge瀏覽器deltaY與瀏覽器窗口高度相關(guān)(瀏覽器以當(dāng)前窗口可容20行,來動態(tài)計算行高),Chrome與窗口高度無關(guān);
五、結(jié)論1、可靠屬性:deltaY,方向判斷方法一致(正值向下滾動,負(fù)值向上滾動),與操作系統(tǒng)鼠標(biāo)設(shè)置有關(guān)聯(lián),但需注意絕對值算法不統(tǒng)一
2、無用屬性:detail,wheelDelta(未實現(xiàn),即使Chrome與Edge也是假值,這與mdn、w3c等文檔描述有差異,但看網(wǎng)絡(luò)相關(guān)分享、jquery控件等卻發(fā)現(xiàn)很多人都在使用。。。)
3、功能方面:Firefox能直觀反映滾動行數(shù),但不能直觀與瀏覽器默認(rèn)滾動條保持同步;其他幾組瀏覽器則恰好相反;
4、個人建議:個人認(rèn)為wheelDelta的最初設(shè)計思想很好,電腦鼠標(biāo)滾輪垂直行數(shù)默認(rèn)值是3,wheelDelta默認(rèn)值120,即單行行高40px,即使用戶電腦做了個性化設(shè)置,像素值也不會出現(xiàn)循環(huán)小數(shù),避免了Chrome的deltaY設(shè)計缺陷,有利于行業(yè)規(guī)范化,所以建議各瀏覽器廠商能完整支持wheelDelta這一屬性。
六、應(yīng)用領(lǐng)域滾動條控件滾輪事件設(shè)計:滾輪效果應(yīng)該有效使用電腦個性化設(shè)置
方案一、固定步距(滾動幅度):按推導(dǎo)公式計算鼠標(biāo)滾動行數(shù)n值,設(shè)定固定行高H,幅度=n×H
方案二、嵌入式(與瀏覽器默認(rèn)效果同步):Firefox使用body字號作為行高H,幅度=deltaY×H;其他瀏覽器,幅度=deltaY
七、VUE中的實踐下面是代碼,自行參考:
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/100085.html
摘要:鎖滾動問題近日做需求,發(fā)現(xiàn)一個常用插件突然出毛病了,于是探究了一番個中原因。但在最新版下,準(zhǔn)確的說是系統(tǒng)環(huán)境下,發(fā)生了自定義滾動條鎖滾動的問題。是通過監(jiān)聽頁面滾輪事件,進(jìn)一步進(jìn)行設(shè)置內(nèi)容位置來實現(xiàn)自定義滾動條的。 tinyscrollbar鎖滾動問題 近日做需求,發(fā)現(xiàn)一個常用插件jquery.tinyscrollbar突然出毛病了,于是探究了一番個中原因。 出問題的場景 在ie,chr...
摘要:之前寫過一篇瀏覽器事件的相關(guān)操作和事件運(yùn)行的原理瀏覽器事件解析。注意,頁面從瀏覽器緩存加載,并不會觸發(fā)事件。事件有一個屬性,返回一個布爾值。此外,不支持事件,可以使用事件代替。 之前寫過一篇瀏覽器事件的相關(guān)操作和事件運(yùn)行的原理——JavaScript瀏覽器事件解析。這一篇主要寫一些常用的事件及一些可能的坑。 表單事件 鍵盤事件 當(dāng) , 的值發(fā)生變化時觸發(fā)。此外,打開 contente...
閱讀 1310·2021-11-16 11:45
閱讀 2233·2021-11-02 14:40
閱讀 3872·2021-09-24 10:25
閱讀 3029·2019-08-30 12:45
閱讀 1255·2019-08-29 18:39
閱讀 2468·2019-08-29 12:32
閱讀 1588·2019-08-26 10:45
閱讀 1917·2019-08-23 17:01