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

HTMLのonwheelイベント属性とは？使い方とサンプルコードをわかりやすく解説

onwheelイベント属性は、ユーザーがHTML要素の上でマウスホイールを上下に動かしたときに発生し、指定されたスクリプト（JavaScript）を実行します。本記事では、HTMLドキュメントにおけるonwheelイベント属性の基本的な使い方を、サンプルコードと実行結果つきでわかりやすく解説します。

構文

onwheelイベント属性の基本的な記述方法は以下の通りです。

<tagname onwheel="script">コンテンツ</tagname>

それでは、HTMLのonwheelイベント属性の具体的な使用例を見ていきましょう。

使用例

以下のサンプルでは、段落要素（<p>）の上でマウスホイールを動かすと、ページの背景色と文字色が変化するように設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
      padding: 20px;
   }
   .wheel {
      border: 2px solid #fff;
      padding: 10px;
   }
</style>
</head>
<body>
<h1>HTML onwheel Event Attribute Demo</h1>
<p onwheel='wheelFn()' class='wheel'>This is a paragraph with some dummy content. 
This is a paragraph with some dummy content. This is a paragraph with some dummy content. 
This is a paragraph with some dummy content. This is a paragraph with some dummy content. 
This is a paragraph with some dummy content. This is a paragraph with some dummy content. 
This is a paragraph with some dummy content.</p>
<p>Move the wheel of the mouse up or down on above paragraph</p>
<script>
   function wheelFn() {
      document.body.style.background = "linear-gradient(45deg, #8BC6EC 0%, #9599E2 100%) no-repeat";
      document.body.style.color = "#fff";
   }
</script>
</body>
</html>

出力結果

ブラウザで開くと、まず次のようにオレンジ系のグラデーション背景が表示されます。

HTMLのonwheelイベント属性とは？使い方とサンプルコードをわかりやすく解説

次に、段落要素の上でマウスホイールを上下に動かしてみてください。onwheelイベントが発生し、背景が青系のグラデーションに変化します。これにより、onwheelイベント属性の動作を確認できます。

HTMLのonwheelイベント属性とは？使い方とサンプルコードをわかりやすく解説

補足ポイント

onwheelイベントは、マウスホイールだけでなく、タッチパッドのスクロール操作でも発生します。また、より柔軟にイベントを制御したい場合は、JavaScriptのaddEventListener()メソッドで「wheel」イベントを登録する方法も便利です。スクロールに合わせたアニメーション表示や拡大縮小など、インタラクティブな演出を実装する際に活用してみてください。

  1. HTMLのondragstartイベント属性とは？使い方とサンプルコードを解説

    HTMLのondragstartイベント属性は、ユーザーがHTML要素や要素内のテキストのドラッグ操作を開始した瞬間に発火するイベント属性です。ドラッグ＆ドロップ機能を実装する際に、ドラッグ開始時の処理（データの設定やメッセージ表示など）を定義するために使用されます。構文ondragstartイベント属性の基本的な構文は以下のとおりです。<tagname ondragstart=script></tagname>ondragstartイベント属性の使用例ここでは、赤い円をドラッグすると「ドラッグを開始しました」というメッセージが表示され、ドラッグが終わると別のメッセージ

  2. HTMLのondropイベント属性とは？使い方をサンプルコードで解説

    HTMLのondropイベント属性は、ドラッグ可能な要素やテキストが、HTMLドキュメント内の有効なドロップ先（ターゲット）にドロップされた瞬間に発火するイベント属性です。ドラッグ＆ドロップ操作を実装する際には、ondragstartやondragoverなどのイベント属性と組み合わせて使用されるのが一般的です。 構文 ondropイベント属性の基本的な構文は以下の通りです。 <tagname ondrop="script"></tagname> 属性値には、ドロップされたときに実行したいJavaScriptのコードまたは関数名を指定します。 サンプ