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

JavaScriptのスクロールイベントとは？基本の使い方をサンプルコードで解説

JavaScriptにおけるスクロールイベント（scroll event）は、ユーザーがスクロールバーを上下に操作したときに発生するイベントです。ページのスクロール位置に応じて処理を実行したい場合に活用される、非常に重要なイベントのひとつです。

スクロールイベントの基本的な仕組み

スクロールイベントは、windowオブジェクトやスクロール可能な要素に対してaddEventListener()メソッドを使って登録できます。スクロールが行われるたびに、登録した関数が繰り返し呼び出される仕組みになっています。

以下は、JavaScriptでスクロールイベントを使用したサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      height: 150vh; /*To have a scrollbar*/
   }
   .result{
      font-size: 18px;
      color: blueviolet;
      font-weight: 500;
   }
</style>
</head>
<body>
<h1>Scroll events in JavaScript</h1>
<div class="result"></div>
<h3>Scroll the scrollbar to see some text in the above paragraph</h3>
<script>
   let resEle = document.querySelector(".result");
   window.addEventListener("scroll", () => {
      resEle.innerHTML = "The scroll event has fired";
   });
</script>
</body>
</html>

コードの解説

このサンプルコードのポイントは以下のとおりです。

  • body要素の高さを150vhに設定することで、意図的にスクロールバーを表示させています。
  • document.querySelector(".result")で、メッセージを表示するための要素を取得しています。
  • window.addEventListener("scroll", ...)により、ウィンドウがスクロールされるたびにコールバック関数が実行されます。
  • スクロールが発生すると、.result要素内に「The scroll event has fired（スクロールイベントが発生しました）」というテキストが表示されます。

実行結果

ページを表示した直後の状態は以下のとおりです。

JavaScriptのスクロールイベントとは？基本の使い方をサンプルコードで解説

少し下にスクロールすると、次のようにメッセージが表示されます。

JavaScriptのスクロールイベントとは？基本の使い方をサンプルコードで解説

まとめ

スクロールイベントを活用することで、「ページの先頭に戻るボタンの表示」「スクロールに連動したアニメーション」「無限スクロール」など、さまざまなインタラクティブな機能を実装できます。ただし、スクロールイベントは短時間に何度も発生するため、パフォーマンスを考慮する場合はthrottle（スロットリング）やrequestAnimationFrameと組み合わせて使うのがおすすめです。

  1. JavaScriptの「for...in」ステートメントとは？オブジェクトのプロパティをループ処理する方法を解説

    JavaScriptのfor...in文は、オブジェクトが持つすべてのプロパティ（列挙可能なプロパティ）を順番に取り出して処理するためのループ構文です。オブジェクト内の各キー（プロパティ名）にアクセスしながら、対応する値を取得したい場合に非常に便利です。for...inの基本的な構文for (let 変数名 in オブジェクト) { // 各プロパティに対して実行したい処理 }ループ変数には、各反復ごとにオブジェクトのプロパティ名（キー）が文字列として代入されます。値そのものを取得するには、「オブジェクト[変数名]」のようにブラケット記法を使ってアクセスします。サンプルコード以下は、for

  2. 【図解付き】JavaScriptにおけるオブジェクトの等価性をわかりやすく解説

    JavaScriptでは、文字列・数値・真偽値などのプリミティブ型はその「値」に基づいて比較されます。一方、オブジェクト(ネイティブオブジェクトでも独自に定義したカスタムオブジェクトでも)は「参照」に基づいて比較されます。 「参照による比較」とは、複数のオブジェクトがメモリ上の同じ場所を指しているかどうかを判定するという意味です。つまり、プロパティの中身が完全に一致していても、別々に生成された2つのオブジェクトは等しいとみなされません。 押さえておきたいポイント プリミティブ型: 値が同じであれば == や === の比較で true になる オブジェクト型: 同じインスタンス(同一の参照