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

JavaScriptのscrollYプロパティとは？役割と基本的な使い方を解説

scrollYプロパティの役割

JavaScriptのscrollYプロパティは、pageYOffsetプロパティとまったく同じ働きをする読み取り専用のプロパティです。現在表示中のドキュメントが、ウィンドウ（ビューポート）の左上隅を基準として垂直方向に何ピクセルスクロールされているかを数値で取得できます。

たとえば、「ページがどのくらい下までスクロールされたか」を判定してヘッダーの表示・非表示を切り替えたり、無限スクロールの実装などに活用できる便利なプロパティです。

なお、水平方向（横）のスクロール量を取得したい場合は、pageXOffsetと同等のscrollXプロパティを使用します。

サンプルコード

次のコードを実行すると、scrollYプロパティの動作を確認できます。「Scroll」ボタンをクリックするとページが200pxずつスクロールされ、その時点の垂直方向のスクロール位置がアラートで表示されます。

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        background-color: yellow;
        height: 1500px;
        width: 1500px;
      }
    </style>
  </head>

  <body>
    <script>
      function scrollFunc() {
        window.scrollBy(200, 200);
        alert("Vertical: " + window.scrollY);
      }
    </script>
    <button onclick="scrollFunc()" style="position:fixed;">Scroll</button>
    <br><br><br>
    <div>
    </div>
  </body>
</html>

補足：ブラウザ対応について

scrollYプロパティは、Chrome・Firefox・Safari・Edgeなど主要なモダンブラウザすべてでサポートされています。古いInternet Explorerでは利用できないため、レガシーブラウザへの対応が必要な場合はpageYOffsetを使うと安全です。

  1. JavaScriptのparseFloat()メソッドとは？役割と使い方をわかりやすく解説

    JavaScriptのparseFloat()メソッドは、文字列を解析（パース）して浮動小数点数を返すためのグローバル関数です。文字列の先頭から数値として読み取れる部分を変換し、数値として解釈できない文字に到達した時点で解析を終了します。 parseFloat()メソッドの主な特徴 文字列の先頭から数値の解析を開始する 先頭にある空白（ホワイトスペース）は無視される 数値として解釈できる部分のみが変換される 解析できない場合は NaN（Not a Number）を返す 使用例 以下のコードを実行して、JavaScriptにおけるparseFloat()メソッドの実際の動作を確認してみま

  2. 【JavaScript】キーボードイベントのaltKeyプロパティとは？役割と使い方を解説

    altKeyプロパティとはJavaScriptのaltKeyプロパティは、キーボードイベントが発生した瞬間にAltキー（MacではOptionキー）が押されていたかどうかを判定するためのプロパティです。このプロパティは真偽値（Boolean）を返します。true … イベント発生時にAltキーが押されていたfalse … Altキーは押されていなかった関連する修飾キーのプロパティaltKeyと同じ仕組みで、他の修飾キーの状態も取得できます。組み合わせて使うことで、より柔軟なキーボード操作の判定が可能になります。ctrlKey … Ctrlキーの状態shiftKey … Shiftキーの状態me