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

JavaScriptのscrollXプロパティとは？役割と使い方を実例で解説

JavaScriptのscrollXプロパティは、pageXOffsetプロパティとまったく同じ働きを持つ読み取り専用のプロパティです。ウィンドウの左上隅を基準として、ドキュメントが現在どれだけスクロールされているかを知りたい場合に使用します。scrollXプロパティを使うことで、水平方向（横方向）にスクロールしたピクセル数を取得できます。

なお、垂直方向（縦方向）のスクロール量を取得したい場合は、対となるscrollYプロパティを使用します。両者を組み合わせることで、ページ全体のスクロール位置を正確に把握することが可能です。

scrollXプロパティの主な特徴

  • pageXOffsetのエイリアス： どちらも同じ値を返すため、実装時はどちらを使っても結果は変わりません。
  • 読み取り専用： 値の設定はできず、スクロール位置の取得のみに使用します。
  • 単位はピクセル： 返される値は整数ではなく浮動小数点数になる場合があります。必要に応じてMath.round()などで丸めるとよいでしょう。

サンプルコード

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

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

コードの解説

このサンプルでは、1500px四方の大きなdiv要素を配置することで、ページをスクロールできる状態を作っています。window.scrollBy(200, 200)によって現在の位置から右と下へそれぞれ200pxずつスクロールし、直後にwindow.scrollXの値をアラートで表示しています。

ボタンにはposition: fixed;を指定しているため、ページをスクロールしてもボタンは画面上の同じ位置に固定され、何度でもクリックして動作を確認できます。クリックを繰り返すたびに表示される数値が200pxずつ増えていくことが分かります。

  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