JavaScript ホイールイベントの使い方_JavaScript スキル

残念ながら、ブラウザはすべて異なります。

1) イベント名が異なります
IE、KHTML (Safari、Chrome)、Opera の対応するイベント名は「mousewheel」です。 Gecko (Firefox、Netscape) に対応するイベント名は「DOMMouseScroll」です。

2) イベント オブジェクトのプロパティは異なります
ユーザーが上にスクロールしたか下にスクロールしたかを知る必要がある場合があります。たとえば、スクロール イベントに応答する関数があります:

コードをコピー コードは次のとおりです:

function WheelHandle (e) {
if(e.wheelDelta) {// IE、KHTML、Opera
alert(e.wheelDelta > 0 ? '上にスクロール' : '下にスクロール');
} else { // Gecko
alert(e.detail < 0 ? '上にスクロール' : '下にスクロール')
}
}

IE 、KHTML は e .wheelDelta をサポートしており、0 より大きい場合は上にスクロールすることを意味し、0 より小さい場合は下にスクロールすることを意味します。 Gecko は e.detail をサポートしています。0 より小さい場合は上にスクロールします。0 より大きい場合は上にスクロールします。一方、Opera は素晴らしく、両方をサポートしています。
以下はホイールイベントを参考に登録するための関数です:

コードをコピーします コードは次のとおりです:

/**
* ホイールイベント関数の登録
* @param 要素: 登録されたイベントオブジェクト
* @param WheelHandle: イベント関数の登録
*/
function addScrollListener(element, WheelHandle) {
if(typeof element != 'object') return; 'function') return;
// ブラウザを監視します
if(typeof argument.callee.browser == 'unknown') {
var user = navigator.userAgent;
var b = {};
b.opera = user.indexOf("Opera") > -1 && typeof window.opera == "オブジェクト";
b.khtml = (user.indexOf("KHTML") > -1 || ユーザー .indexOf("AppleWebKit") > user.indexOf("Konqueror") >
b.ie = user.indexOf("MSIE") > - 1 && !b.opera;
b.gecko = user.indexOf("Gecko") >
arguments.callee.browser = b;
if(element == window)
element = document;
if(arguments.callee.browser.ie)
element.attachEvent('onmousewheel', WheelHandle); >element.addEventListener(arguments.callee.browser.gecko ? 'DOMMouseScroll' : 'mousewheel',wheelHandle, false);
}


リスニング イベントを登録します:

コードをコピーします

コードは次のとおりです。 var display = document.getElementById('display'); function WheelHandle(e) { if(e.wheelDelta) {// IE、KHTML、Opera

display.innerHTML = (e.wheelDelta > 0 ? 'Up' : 'Down'); } else { // Gecko

display.innerHTML = (e.detail < 0 ? 'Up' : 'Down')
}
}
addScrollListener(window, WheelHandle); >