用 JavaScript 處理滑鼠滾輪的教學文件。
現代的網頁發展得越來越像一個正規的應用程式,透過 JavaScript 和事件處理器(event handler)對各種輸入設備作出反應,例如:
對於如何處理滑鼠滾輪,可以找到的資料很少,應用範例更少,Adomas Paltanavicius 的教學文件正好填補這方面的空白,他的方法甚至是跨平台、跨瀏覽器的。下面是他的範例程式:
|
|
範例中的事件處理函數 handle() 作甚麼工作當然由你們來編寫,它接受一個參數 delta,代表滾輪滾動的距離(也可叫作滾動的角度)。
正如左邊的圖像所示,滾輪向上滾動,delta 是正數,相反方向的話 delta 便是負數。習慣上當滾輪向上滾動的時候,頁面是向下滾動的;當滾輪向下滾動的時候,頁面則向上滾動,現在便用滑鼠試試看。
有些人會問 delta 的數值重要嗎?一般來說我們只需理會 delta 是正數還是負數,它的數值在大多數的情況下界乎 -1 至 +1 之間,但是在某些手提電腦,加上一些極端的滑鼠設定,得到數值可以甚為極端,曾經有人以極快的數度滾動滾輪得到數值 14,也有人在蘋果的 PowerBook 上得到 76 的巨大數值。若果滑鼠設定了加速功能,情況便更加混亂,例如以極慢的速度來滾動,你可能得到 +/-0.1,當速度增大三倍,你卻會得到 +/-30 的數值。Camino 和 Firefox 同樣使用 Gecko 引擎,但測試結果顯示兩者對於同樣的滾動速度得到的 delta 數值並不相同。為你使你的 JavaScript 在所有平台和瀏覽器都有相似的表現,我們建議只考慮 delta 是正數還是負數,不要根據 delta 的具體數值進行運算。
兼容性方面這個範例在以下的瀏覽器(及更新的版本)皆可正常運作:
以下瀏覽器已知並不兼容:
為了保持網頁的可用性,以下情況應盡力避免:
此外,若果網頁中有 layer 的話,最好全部加上 position:absolute,若果你的網頁需要上下滾動才能觀看的話,你可能會遇到大麻煩。