html5ページでマウスホイールイベントの使用方法

この記事では、ズームなどのアクションを有効にするために標準のページスクロールを超えて、マウスホイールの対話性でHTML5 Webページを強化する方法について説明します。 コアチャレンジは、特により一般的なイベントの代わりにFirefoxが

イベントを使用したことに、クロスブラウザーの互換性にあります。 DOMMouseScroll画像をズームする例を示しましょう：mousewheel

最初に、HTMLに画像を追加します：

次に、マウスホイールイベントを処理するためにJavaScript関数を追加します：

<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174067598031395.jpg"  class="lazy" alt="How to Use the Mouse Wheel Event in HTML5 Pages " />

最後に、ブラウザの違いを説明するイベントハンドラーを添付します：

function MouseWheelHandler(e) {
  // Cross-browser wheel delta
  var e = window.event || e; // IE support
  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

  // Adjust image size (adjust min/max as needed)
  var myimage = document.getElementById("myimage");
  myimage.style.width = Math.max(50, Math.min(800, myimage.width + (30 * delta))) + "px";

  return false; // Prevent default scrolling
}

このコードは、マウスホイールの方向に基づいて画像幅を動的に調整します。

および

関数は、幅が定義された範囲内にとどまることを確認します（この場合は50px〜800px）。

var myimage = document.getElementById("myimage");
if (myimage.addEventListener) {
  myimage.addEventListener("mousewheel", MouseWheelHandler, false);
  myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else {
  myimage.attachEvent("onmousewheel", MouseWheelHandler);
}

ステートメントは、デフォルトのページのスクロール動作を防ぎます。 このアプローチは、インターネットエクスプローラーの古いバージョンを含む主要なブラウザー間で機能しますが、Safariのスクロールホイールの取り扱いは、特定のWebKitバージョンに応じてさらに調整する必要がある場合があります。

Math.maxよくある質問（FAQ）：Math.min return false

次のFAQには、JavaScriptを使用してマウスホイールイベントを検出および処理することに関する一般的な質問に対応しています。

マウスホイールイベントの検出：

最新のブラウザーに標準

イベントを使用します。 古いコードは

（すなわち）または
• （firefox）を使用する場合がありますが、

  は最高のクロスブラウザー互換性を提供します。 wheel mousewheelDOMMouseScrollvs.wheel：

は、標準および好みの方法です。
• はレガシーであり、信頼性が低いです。

  wheel mousewheelスクロール方向の決定：wheelイベントのmousewheelプロパティは、垂直スクロール方向（ダウンが肯定的で、UPに対して負）を示します。

  水平スクロール情報を提供します

• デフォルトアクションの防止：deltaYを使用して、デフォルトのスクロール動作を停止し、カスタムアクションを実装します。 wheel deltaX

水平スクロール：

• を使用して、水平スクロールを検出します。 event.preventDefault()

• プロパティ：

  このプロパティは、および（ピクセル、行、またはページ）の単位を指定します。 通常は0（ピクセル）です。deltaX

• モバイルデバイスのサポート：マウスホイールイベントは、モバイルデバイスに直接適用できません。代わりにタッチイベントを使用する必要があります。deltaMode deltaX deltaY

  firefox互換性：
firefoxは標準
• イベントをサポートしています
  jQueryサポート：
jqueryの
• メソッドは、イベントの処理を簡素化します
• マウスホイールイベントのシミュレーションのシミュレーション：

  テスト目的でおよびを使用します。 new WheelEvent('wheel', {deltaY: ...}) dispatchEvent()

以上がhtml5ページでマウスホイールイベントの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。