JavaScript 處理滑鼠滾輪教學文件

阿恆

Ajaxian 報導 Adomas Paltanavicius 寫了一篇用 JavaScript 處理滑鼠滾輪的教學文件。

現代的網頁發展得越來越像一個正規的應用程式，透過 JavaScript 和事件處理器（event handler）對各種輸入設備作出反應，例如：

對於如何處理滑鼠滾輪，可以找到的資料很少，應用範例更少，Adomas Paltanavicius 的教學文件正好填補這方面的空白，他的方法甚至是跨平台、跨瀏覽器的。下面是他的範例程式：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

/** This is high-level function.
* It must react to delta being more/less than zero.
*/
function handle(delta) {
    if (delta <0)
        …;
    else
        …;
}

/** Event handler for mouse wheel event. */
  
function wheel(event) {
    var delta = 0;
    if (!event) /* For IE. */
        event = window.event;
    if (event.wheelDelta) {
        /* IE/Opera. */
        delta = event.wheelDelta/120;
        /** In Opera 9, delta differs in sign as compared to IE. */
        if (window.opera)
            delta = -delta;
    } else if (event.detail) { /** Mozilla case. */
        /** In Mozilla, sign of delta is different than in IE.
          * Also, delta is multiple of 3.
        */
        delta = -event.detail/3;
    }
  
    /** If delta is nonzero, handle it.
      * Basically, delta is now positive if wheel was scrolled up,
      * and negative, if wheel was scrolled down.
    */
    if (delta)
        handle(delta);
}

/** Initialization code.
* If you use your own event management code, change it as required.
*/
if (window.addEventListener)
    /** DOMMouseScroll is for mozilla. */
    window.addEventListener("DOMMouseScroll", wheel, false);

/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;

mouse deltas 範例中的事件處理函數 handle() 作甚麼工作當然由你們來編寫，它接受一個參數 delta，代表滾輪滾動的距離（也可叫作滾動的角度）。

正如左邊的圖像所示，滾輪向上滾動，delta 是正數，相反方向的話 delta 便是負數。習慣上當滾輪向上滾動的時候，頁面是向下滾動的；當滾輪向下滾動的時候，頁面則向上滾動，現在便用滑鼠試試看。

有些人會問 delta 的數值重要嗎？一般來說我們只需理會 delta 是正數還是負數，它的數值在大多數的情況下界乎 -1 至 +1 之間，但是在某些手提電腦，加上一些極端的滑鼠設定，得到數值可以甚為極端，曾經有人以極快的數度滾動滾輪得到數值 14，也有人在蘋果的 PowerBook 上得到 76 的巨大數值。若果滑鼠設定了加速功能，情況便更加混亂，例如以極慢的速度來滾動，你可能得到 +/-0.1，當速度增大三倍，你卻會得到 +/-30 的數值。Camino 和 Firefox 同樣使用 Gecko 引擎，但測試結果顯示兩者對於同樣的滾動速度得到的 delta 數值並不相同。為你使你的 JavaScript 在所有平台和瀏覽器都有相似的表現，我們建議只考慮 delta 是正數還是負數，不要根據 delta 的具體數值進行運算。

兼容性方面這個範例在以下的瀏覽器（及更新的版本）皆可正常運作：

  • Internet Explorer 6
  • Firefox 1.0
  • Opera 9（較早期的版本並不兼容）
  • Safari (?)

以下瀏覽器已知並不兼容：

  • OmniWeb
  • iCab

為了保持網頁的可用性，以下情況應盡力避免：

  • 製作令用戶感到驚奇的效果：對於非專業的用戶來說，驚奇即等於不知所措，請盡力保留滾輪應有的、大眾接受的功能。例如在一個檔案名稱的菜單中，大部分人都認為滾輪是用來選擇檔案的，請不要改變這個功能。在一幅地圖中，很多人都習慣了用滾輪來放大／縮小，請保留這一項功能。
  • 強迫用戶使用滾輪來完成作業：不是所有滑鼠都有滾輪的，甚至不是所有電腦都有滑鼠的（例如某些手帳系統）。

此外，若果網頁中有 layer 的話，最好全部加上 position:absolute，若果你的網頁需要上下滾動才能觀看的話，你可能會遇到大麻煩。