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

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

• 鍵盤：keydown、keyup、keypress 等
• 滑鼠：mouseover、mouseout、mousedown、mouseup、click、dblclick 等
• 兩者兼顧：focus、blur、change、select 等

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

/** 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; 

範例中的事件處裡函數 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，若果你的網頁需要上下滾動才能觀看的話，你可能會遇到大麻煩。