先來(lái)看看各個(gè)瀏覽器的兼容情況

IE 6,7,8
注冊(cè)事件使用 onmousewheel
取得滾動(dòng)的值使用 event.wheelDelta
滾動(dòng)步長(zhǎng) 120
向下是負(fù)值，向上是正值
當(dāng)鼠標(biāo)在一個(gè)同一個(gè)坐標(biāo)，并且滾輪不間斷滾動(dòng)時(shí)，wheelDelta會(huì)按步長(zhǎng)遞增
（比如 -240 -360 ）


Firefox 3.5
注冊(cè)事件有兩個(gè)MozMousePixelScroll,DOMMouseScroll,但是它們不能使用element.onDOMMouseScroll方式注冊(cè)，必須使用addEventLinstener來(lái)監(jiān)聽(tīng)事件
Firefox沒(méi)有event.wheelDelta,它使用event.detail 來(lái)獲取滾動(dòng)的信息(Firefox這點(diǎn)做的很奇怪)
event.detail 本身是用來(lái)記錄一個(gè)事件在原地(鼠標(biāo)坐標(biāo)不發(fā)生變化的情況下)執(zhí)行了多少次的信息
而在DOMMouseScroll事件發(fā)生的時(shí)候，它的值通常是 3 和 -3
但是它的取值和IE正好相反, 向上是負(fù),向下是正( 這個(gè)問(wèn)題在代碼中需要做統(tǒng)一 )
為什么說(shuō)它的值通常是 3和-3呢，因?yàn)楫?dāng)你按住ctrl ,alt, shift 之后，再滑動(dòng)鼠標(biāo)滾輪，detail 的值就會(huì)成為 1和-1
而按住別的鍵，則正值有時(shí)還會(huì)變成6
總之在我看來(lái)是有點(diǎn)亂糟糟，


MozMousePixelScroll 據(jù)Mozilla說(shuō)，是幾乎跟DOMMouseScroll一樣的事件，只不過(guò)更精確（到像素）
但是這個(gè)事件的detail值返回的非常奇怪，默認(rèn)是51和-51,按住ctrl ,alt, shift 變成了 +- 17. @_@，所以它被華麗的無(wú)視了，我們不打算使用它


Chrome 和IE保持一致，但是它考慮到了橫向鼠標(biāo)滾輪設(shè)備的情況，所以增加了兩個(gè)鼠標(biāo)來(lái)分別獲取值

事件 onmousewheel
wheelDelta {number}
wheelDeltaX {number}
wheelDeltaY {number}

這次 Opera 又是集大成者，既有detail 取值也一樣是3,-3,又有wheelDelta,不過(guò)表現(xiàn)上倒是很一致
事件 onmousewheel
detail = {number}
wheelDelta = {number}



本來(lái)我們應(yīng)該從Firefox支持的event.detail或者IE等支持的event.wheelDelta的取值中，選擇一個(gè)，然后把另一個(gè)通過(guò)計(jì)算做成統(tǒng)一的，
但是實(shí)際上我們只能通過(guò)這些值知道 是向上滾 還是向下滾，
所以為了方便，我們兩個(gè)都不取，通過(guò)計(jì)算把他們統(tǒng)一成 +1 和 -1.(這樣做也是為了實(shí)際應(yīng)用中的運(yùn)算方便);

對(duì)于IE,Chrome來(lái)說(shuō)，直接除以120就可以搞定

Opera 同時(shí)支持wheelDelta和detail ,但是detail沒(méi)有wheelDelta同一位置遞增的能力，所以
我們首先優(yōu)先判斷wheelDelta是否存在，如果存在，就使用wheelDelta,如果不存在再使用detail

由于firefox的鍵盤(pán)干擾，我們還需要對(duì)detail做一些過(guò)濾
首先用這個(gè)值跟3做取模運(yùn)算 value % 3
說(shuō)它是3的倍數(shù)，那么返回值是0，我們就用value除以3后返回( 保證返回的值是+1 -1 )
如果返回值不是0，那說(shuō)明這個(gè)值不是1就是-1，那就直接返回這個(gè)值

最后，由于Firefox返回值的規(guī)則是向上是負(fù) 向下是正，與平時(shí)的習(xí)慣不同，我們要將正負(fù)反轉(zhuǎn)過(guò)來(lái)，方法也很簡(jiǎn)單，計(jì)算結(jié)果前面加一個(gè)負(fù)號(hào)就可以搞定
話說(shuō)回來(lái)，對(duì)滾輪事件的支持情況firefox真是有點(diǎn)悶.

好了，分析了一大堆，其實(shí)代碼就幾句:

最后說(shuō)說(shuō)未來(lái)的滾輪事件和API
在DOM3 Event 中
滾輪事件變得更為復(fù)雜（也支持更多的東西）
注冊(cè)的事件并沒(méi)有變，依然叫mousewheel
專(zhuān)門(mén)增加了兩枚滾輪事件對(duì)象
MouseWheelEvent
WheelEvents
而且支持了x,y,z三個(gè)軸向的滾輪值( 真復(fù)雜>_< )
感興趣可以瞧瞧這里
http://www.w3.org/TR/DOM-Level-3-Events/#events-mousewheelevents

最新評(píng)論