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

先看看我標(biāo)簽頁的界面：

如果打開的標(biāo)簽超過滾動區(qū)域?qū)挾?#xff0c;會顯示滾動條，支持鼠標(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)，Firefox54、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中的實踐

下面是代碼，自行參考：

ref="scrollContainer"

:vertical="false"

class="scroll-container"

@wheel.native.prevent="handleScroll"

>

export default {

name: "ScrollPane",

data() {

return {

left: 0

};

},

methods: {

handleScroll(e) {

// wheelDelta：獲取滾輪滾動方向，向上120，向下-120，但為常量，與滾輪速率無關(guān)

// deltaY：垂直滾動幅度，正值向下滾動。電腦鼠標(biāo)滾輪垂直行數(shù)默認(rèn)值是3

// wheelDelta只有部分瀏覽器支持，deltaY幾乎所有瀏覽器都支持

const eventDelta = e.wheelDelta || -e.deltaY * 40;

const $scrollWrapper = this.$refs.scrollContainer.$refs.wrap;

// 0到scrollLeft為滾動區(qū)域隱藏部分

$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4;

}

}

};

總結(jié)

以上是生活随笔為你收集整理的java响应鼠标滚轮事件_一文读懂鼠标滚轮事件（wheelEvent）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。