JS滾輪事件onmousewheel使用介紹
更新時(shí)間：2013年11月01日 17:20:41 作者：
鼠標(biāo)滾輪滾動(dòng)控制圖片或者文字的大小，例如此類的轉(zhuǎn)動(dòng)鼠標(biāo)滾輪實(shí)現(xiàn)縮放等等交互效果中，會(huì)用到 Mousewheel 事件，感興趣的朋友可以了解下
典型的應(yīng)用時(shí)鼠標(biāo)滾輪滾動(dòng)控制圖片或者文字的大小，例如此類的轉(zhuǎn)動(dòng)鼠標(biāo)滾輪實(shí)現(xiàn)縮放等等交互效果中，會(huì)用到 Mousewheel 事件。在大多數(shù)瀏覽器（IE6, IE7, IE8, Opera 10+, Safari 5+）中，都提供了 “mousewheel” 事件。滾輪事件的兼容性差異有些不拘一格，不是以往的IE8-派和其他派，而是FireFox派和其他派，杯具的是 Firefox 3.5+ 卻不支持此事件，不過(guò)慶幸 Firefox 3.5+ 中提供了另外一個(gè)等同的事件：”DOMMouseScroll” ，兼容代碼如下：
// isFirefox 是偽代碼，大家可以自行實(shí)現(xiàn)
mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";
“mousewheel” 事件中的 “event.wheelDelta” 屬性值：返回的值，如果是正值說(shuō)明滾輪是向上滾動(dòng)，如果是負(fù)值說(shuō)明滾輪是向下滾動(dòng)；返回的值，均為120 的倍數(shù)，即：幅度大小 = 返回的值 / 120。
“DOMMouseScroll” 事件中的 “event.detail” 屬性值：返回的值，如果是負(fù)值說(shuō)明滾輪是向上滾動(dòng)（與 “event.wheelDelta” 正好相反），如果是正值說(shuō)明滾輪是向下滾動(dòng)；返回的值，均為 3 的倍數(shù)，即：幅度大小 = 返回的值 / 3。
“mousewheel” 事件在 Opera 10+ 中卻是個(gè)特例，既有 “event.wheelDelta” 屬性，也有 “event.detail” 屬性。
復(fù)制代碼 代碼如下:
// isFirefox 是偽代碼，大家可以自行實(shí)現(xiàn)
mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";
“mousewheel” 事件中的 “event.wheelDelta” 屬性值：返回的值，如果是正值說(shuō)明滾輪是向上滾動(dòng)，如果是負(fù)值說(shuō)明滾輪是向下滾動(dòng)；返回的值，均為120 的倍數(shù)，即：幅度大小 = 返回的值 / 120。
“DOMMouseScroll” 事件中的 “event.detail” 屬性值：返回的值，如果是負(fù)值說(shuō)明滾輪是向上滾動(dòng)（與 “event.wheelDelta” 正好相反），如果是正值說(shuō)明滾輪是向下滾動(dòng)；返回的值，均為 3 的倍數(shù)，即：幅度大小 = 返回的值 / 3。
“mousewheel” 事件在 Opera 10+ 中卻是個(gè)特例，既有 “event.wheelDelta” 屬性，也有 “event.detail” 屬性。
您可能感興趣的文章:
- js中鼠標(biāo)滾輪事件詳解(firefox多瀏覽器)
- javascript監(jiān)聽(tīng)鼠標(biāo)滾輪事件淺析
- javascript 鼠標(biāo)滾輪事件
- js捕獲鼠標(biāo)滾輪事件代碼
- javascript 兼容鼠標(biāo)滾輪事件
- javascript實(shí)現(xiàn)禁止鼠標(biāo)滾輪事件
- JavaScript 滾輪事件使用說(shuō)明
- JavaScript焦點(diǎn)事件、鼠標(biāo)事件和滾輪事件使用詳解
- 兩種js監(jiān)聽(tīng)滾輪事件的實(shí)現(xiàn)方法
- javascript滾輪事件基礎(chǔ)實(shí)例講解（37）
相關(guān)文章
這篇文章主要介紹了如何利用微信小程序制作一個(gè)打卡時(shí)鐘，分為工作和休息兩種狀態(tài)，用戶可以設(shè)置相應(yīng)的時(shí)間，所有的時(shí)鐘記錄都會(huì)被保存下來(lái)，感興趣的可以了解一下2022-04-04
小程序?qū)崿F(xiàn)左滑刪除的效果的實(shí)例代碼
這篇文章主要介紹了小程序?qū)崿F(xiàn)左滑刪除的效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
BOM操作querySelector?querySeletorAll獲取標(biāo)簽對(duì)象
這篇文章主要為大家介紹了BOM操作querySelector?querySeletorAll獲取標(biāo)簽對(duì)象步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
JavaScript讀二進(jìn)制文件并用ajax傳輸二進(jìn)制流的方法
這篇文章主要介紹了JavaScript讀二進(jìn)制文件并用ajax傳輸二進(jìn)制流的方法的相關(guān)資料,需要的朋友可以參考下2016-07-07
這篇文章主要介紹了基于js判斷瀏覽器是否支持webGL,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了VSCode 配置uni-app的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
小程序分頁(yè)實(shí)踐之編寫可復(fù)用分頁(yè)組件
這篇文章主要介紹了小程序分頁(yè)實(shí)踐之編寫可復(fù)用分頁(yè)組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
js中call()和apply()改變指針問(wèn)題的講解
今天小編就為大家分享一篇關(guān)于js中call()和apply()改變指針問(wèn)題的講解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
JavaScript 面向?qū)ο蠡A(chǔ)簡(jiǎn)單示例
這篇文章主要介紹了JavaScript 面向?qū)ο蠡A(chǔ),結(jié)合簡(jiǎn)單實(shí)例形式分析了JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)中類的定義、類方法與屬性相關(guān)操作技巧,需要的朋友可以參考下2019-10-10
Javascript學(xué)習(xí)筆記-詳解in運(yùn)算符
in運(yùn)算符是javascript語(yǔ)言中比較特殊的一個(gè)，可以單獨(dú)使用作為判斷運(yùn)算符，也常被用于for...in循環(huán)中遍歷對(duì)象屬性2011-09-09