jsのマウスホイールイベントを詳しく解説（Firefoxマルチブラウザ）_javascriptスキル

添付イベント

テストした結果、IE/Opera は同じタイプであり、attachEvent を使用してホイール イベントを追加できます。

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

/*IE 登録イベント*/
if( document.attachEvent){
document.attachEvent('onmousewheel',scrollFunc);
}

Firefox は addEventListener を使用してスクロール ホイール イベントを追加します

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

/*Firefox 登録イベント*/
if(document.addEventListener) {
document.addEventListener( 'DOMMouseScroll',scrollFunc,false);
}

Safari と Chrome は同じタイプであり、HTML DOM を使用してイベントを追加できます
window.onmousewheel=document.onmousewheel=scrollFunc;/ /IE/Opera/Chrome
Firefox を除き、その他すべては HTML DOM を使用してイベントを追加できるため、次のメソッドを使用してイベントを追加します

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

/*イベントを登録*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

詳細とwheelDelta

スクロール ホイールが上か下かを判断します。 ブラウザーの互換性も考慮する必要があります。 5 つの主要なブラウザー (IE、Opera、Safari、Firefox、Chrome) のうち、Firefox は詳細を使用し、他の 4 つはブラウザーの互換性を考慮する必要があります。 WheelDelta を使用します。この 2 つは値が矛盾しているだけです。つまり、意味は同じです。detail と WheelDelta はそれぞれ 2 つの値のみを取り、detail は ±3 のみを取り、wheelDelta は ±120 のみを取ります。正の数は上向きと負の数を表します。数字は下向きを表します。

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

スクロール値:(IE/Opera)

<ラベル="詳細 "> スクロール値: (Firefox)

スクロール ホイール値の効果 -http://www.jb51.net/ <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title>