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

JavaScriptのonscrollイベントとは？使い方と実装サンプルを解説

onscrollイベントとは

JavaScriptのonscrollイベントは、要素に割り当てられたスクロールバーが動かされた（スクロールされた）タイミングで発生するイベントです。ブラウザウィンドウ全体のスクロールだけでなく、overflow: scroll; などを指定してスクロール可能にした要素に対しても利用できます。

このイベントを活用することで、「スクロール量に応じたヘッダーの表示・非表示」「無限スクロール」「スクロール連動アニメーション」など、ユーザーのスクロール操作に反応するインタラクティブな機能を実装できます。

onscrollイベントの基本的な使い方

以下のサンプルコードでは、スクロール可能なdiv要素に対してonscrollイベントを設定しています。要素内のスクロールバーを実際に動かすと、メッセージが表示される仕組みです。コードをHTMLファイルとして保存し、ブラウザで開いて挙動を確認してみてください。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            border: 2px solid blue;
            width: 300px;
            height: 100px;
            overflow: scroll;
         }
      </style>
   </head>
   <body>
      <div id="content">
         これはデモ用テキストです。これはデモ用テキストです。
         これはデモ用テキストです。これはデモ用テキストです。
         これはデモ用テキストです。これはデモ用テキストです。
         これはデモ用テキストです。これはデモ用テキストです。
         これはデモ用テキストです。これはデモ用テキストです。
      </div>
      <p id="myScroll"></p>
      <script>
         document.getElementById("content").onscroll = function() { myFunction() };
         function myFunction() {
            document.getElementById("myScroll").innerHTML = "スクロールに成功しました！";
         }
      </script>
   </body>
</html>

コードの解説

document.getElementById("content").onscroll = function() { myFunction() }; の部分で、id属性が「content」のdiv要素にonscrollイベントハンドラを登録しています。ユーザーがこの要素内のスクロールバーを操作すると、関数 myFunction() が呼び出され、id属性が「myScroll」のp要素に「スクロールに成功しました！」というメッセージが出力されます。

CSS側では、div要素に width: 300px; と height: 100px; を指定し、overflow: scroll; を設定することで、コンテンツ量が表示領域を超え、スクロールバーが常に表示される状態を作っています。

addEventListenerを使った代替の書き方

より柔軟なイベント処理を行いたい場合は、addEventListenerメソッドを使用する方法もおすすめです。

const element = document.getElementById("content");
element.addEventListener("scroll", function() {
   document.getElementById("myScroll").innerHTML = "スクロールされました！";
});

addEventListenerを使えば、同じ要素に複数のイベントリスナーを登録できるため、コードの保守性や拡張性が向上します。また、スクロール処理は高頻度で発生するため、パフォーマンスが気になる場合は「requestAnimationFrame」や「setTimeout」によるスロットリングを組み合わせると効果的です。

  1. JavaScriptにおけるscreenYマウスイベントの役割とは？

    JavaScriptにおいて、screenYマウスイベントプロパティは、イベントが発生した際のマウスポインタの垂直方向（Y軸）の座標を返します。 この値は、画面（モニター）の左上を原点とした絶対的な座標として取得されるため、ブラウザウィンドウの位置に関係なく、画面全体の中でのポインタ位置を知ることができます。なお、水平方向の座標を取得したい場合は、同じく用意されている screenX プロパティを使用します。 screenYの主な特徴 マウスポインタの垂直座標（Y座標）をピクセル単位で返す 画面の左上を基準点（0, 0）とする clientY とは異なり、ブラウザの表示領域ではなく画面全体が

  2. JavaScriptのevery()メソッドとは？使い方とサンプルコードをわかりやすく解説

    JavaScriptの配列（Array）メソッドである every() は、配列内のすべての要素が、指定した関数によるテスト条件を満たしているかどうかを判定するメソッドです。 判定結果はブール値（真偽値）として返されます。 すべての要素が条件を満たす場合 → true 1つでも条件を満たさない要素がある場合 → false every()メソッドのパラメータ every()メソッドでは、以下の2つの引数を使用できます。 callback − 各要素に対して実行されるテスト用の関数です。この関数が false を返すと、その時点で処理が中断され、every()全体が false を返します