HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLで要素上のマウスホイールスクロール時にスクリプトを実行する方法

HTMLのonwheel属性を使用すると、要素の上でマウスホイールがスクロールされたタイミングでスクリプト（JavaScript）を実行することができます。

ユーザーがマウスホイールを操作するたびに関数が呼び出されるため、ズーム機能やスクロール連動アニメーションなど、インタラクティブな演出を実装したい場合に便利です。

基本的な使い方

対象の要素にonwheel属性を設定し、実行したい関数名を指定します。以下は、div要素上でマウスホイールをスクロールするとアラートが表示されるシンプルな例です。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id = "myDIV" onwheel = "display()">This is demo text. Roll the mouse wheel here.</div>

    <script>
      function display() {
        alert("Mouse Wheel used!");
      }
    </script>

  </body>
</html>

実行結果

上記のコードをブラウザで開き、「This is demo text. Roll the mouse wheel here.」と表示された部分の上でマウスホイールを回すと、「Mouse Wheel used!」というアラートが表示されます。

addEventListenerを使った書き方

HTML属性に直接記述する代わりに、JavaScript側でaddEventListenerメソッドを使ってwheelイベントを登録することもできます。この方法なら、1つの要素に複数のリスナーを設定したり、動的に生成した要素へ後からイベントを追加したりできるため、より柔軟な実装が可能です。

document.getElementById("myDIV").addEventListener("wheel", function() {
  alert("Mouse Wheel used!");
});

注意点

  • wheelイベントは頻繁に発生するため、重い処理を実行する場合はパフォーマンスへの影響に注意しましょう。必要に応じてthrottle（スロットル）やdebounce（デバウンス）で処理回数を制限すると効果的です。
  • preventDefault()を呼び出すことで、wheelイベント発生時のデフォルトのスクロール動作をキャンセルできます。ただし、ページのスクロールを妨げるとユーザビリティを損なう可能性があるため、使用は最小限にとどめるのがおすすめです。
  • 古いブラウザでは「mousewheel」や「DOMMouseScroll」というイベント名が使われていましたが、現在は標準の「wheel」イベントが広くサポートされています。
  1. HTMLで要素がフォーカスを取得したときにスクリプトを実行する方法

    HTMLでは、onfocus属性を使用することで、要素がフォーカスを取得した瞬間にJavaScriptを実行できます。 onfocus属性とは onfocus属性は、テキスト入力欄やボタンなどのフォーム要素がユーザーによって選択され（フォーカスされ）、入力可能な状態になったときに、指定したスクリプト（関数）を呼び出すイベントハンドラです。 主な活用シーンとしては、以下のようなものが挙げられます。 入力欄がフォーカスされたときに背景色を変えて、現在どの項目を編集中か視覚的に強調する 入力欄のプレースホルダーやヒントテキストを表示する バリデーションメッセージやガイダンスを動的に切り替える 実

  2. HTMLのonmousedown属性でマウスボタンが押されたときにスクリプトを実行する方法

    HTML要素の上でマウスボタンが押された瞬間にスクリプトを実行したい場合は、onmousedown属性を使用します。この属性は、ユーザーが対象の要素をマウスでクリック（押し下げ）したタイミングで、指定したJavaScript関数を呼び出します。なお、onmousedownはボタンを「押した」瞬間に発火するイベントであり、ボタンを「離した」瞬間に発火するonmouseup属性と組み合わせて使うことで、より直感的なインタラクションを実現できます。サンプルコード以下のコードでは、見出し（h3要素）にonmousedown属性とonmouseup属性を設定しています。見出しの上でマウスボタンを押すと文