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

pageYOffsetプロパティとは？役割と使い方を解説

JavaScriptでウィンドウの左上隅からドキュメントがスクロールしたピクセル数を取得したい場合、pageXOffsetプロパティとpageYOffsetプロパティを使用します。このうち、pageYOffsetは垂直方向（縦）のスクロール量をピクセル単位で取得するためのプロパティです。

pageYOffsetプロパティの基本

pageYOffsetはwindow.pageYOffsetの形式で参照し、ページが上端からどれだけ下にスクロールされているかを数値（ピクセル）として返します。読み取り専用のプロパティのため、値を直接変更することはできません。

なお、pageYOffsetはwindow.scrollYのエイリアス（別名）でもあり、どちらを使っても同じ結果が得られます。同様に、水平方向のスクロール量を取得するにはwindow.pageXOffset（またはwindow.scrollX）を使用します。

サンプルコード

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

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      background-color: green;
      height: 1500px;
      width: 1500px;
    }
  </style>
</head>
<body>
  <script>
    function scrollFunc() {
      window.scrollBy(200, 200);
      alert("Vertical: " + window.pageYOffset);
    }
  </script>
  <button onclick="scrollFunc()" style="position:fixed;">Scroll</button>
  <br><br><br>
  <div></div>
</body>
</html>

コードのポイント

  • window.scrollBy(200, 200)：現在の位置から水平・垂直それぞれ200ピクセルずつスクロールします。
  • window.pageYOffset：スクロール後の垂直方向の位置を取得し、アラートで表示します。
  • ボタンにはposition: fixed;を指定しているため、スクロールしてもボタンは画面上に固定されたまま表示されます。

このように、pageYOffsetプロパティを使えば、スクロール位置を簡単に取得できるため、「トップへ戻る」ボタンの表示制御や、スクロールに連動したアニメーションなど、さまざまな場面で活用できます。

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

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

  2. HTML WindowのpageYOffsetプロパティとは？使い方とコード例をわかりやすく解説

    pageYOffsetプロパティとはHTML WindowオブジェクトのpageYOffsetプロパティは、現在のドキュメントが垂直方向（上端）からどれだけスクロールされているかを、ピクセル単位の数値として返します。ページのスクロール位置を取得したい場合に便利なプロパティで、読み取り専用のため値の設定はできません。水平方向のスクロール量を取得したい場合は、同様にpageXOffsetプロパティを使用します。構文pageYOffsetプロパティの基本的な構文は以下のとおりです。window.pageYOffsetサンプルコードここでは、「Scroll」ボタンでページを10pxずつスクロールし、「