JSでスクロール位置を取得するにはどうすればいいですか？

Webページを閲覧する際、スクロールは欠かせない操作の一つです。JavaScriptでスクロール位置を取得したり設定したりすることで、よりインタラクティブなWebページを作成することができます。この記事では、JavaScriptを用いたスクロール位置の取得方法について解説していきます。

画面のスクロール位置の取得

画面のスクロール位置（水平方向と垂直方向）を取得するには、それぞれ `window.scrollX` と `window.scrollY` プロパティを使用します。

`window.scrollX` : 水平方向のスクロール量（ピクセル単位）を取得します。
`window.scrollY` : 垂直方向のスクロール量（ピクセル単位）を取得します。

これらのプロパティは読み取り専用で、値を変更することはできません。

使用例


  <!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>スクロール位置の取得</title>
    <style>
      body {
        height: 2000px; /* スクロールできるようにするため */
      }
      #scroll-info {
        position: fixed;
        top: 10px;
        left: 10px;
        background-color: #eee;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div id="scroll-info"></div>
  
    <script>
      const scrollInfo = document.getElementById('scroll-info');
  
      window.addEventListener('scroll', () => {
        scrollInfo.textContent = `スクロール位置：(${window.scrollX}, ${window.scrollY})`;
      });
    </script>
  </body>
  </html>

上記のコードでは、スクロールイベントが発生するたびに、`window.scrollX` と `window.scrollY` を用いて水平方向と垂直方向のスクロール量を取得し、画面上に表示しています。

ブラウザの互換性

`window.scrollX` と `window.scrollY` は、主要なブラウザで広くサポートされています。ただし、Internet Explorer の古いバージョンではサポートされていません。

ブラウザ	バージョン	サポート状況
Chrome	61+	✅
Firefox	52+	✅
Safari	10.1+	✅
Edge	16+	✅
Internet Explorer	全バージョン	❌

代替手段（Internet Explorer 対応）

Internet Explorer の古いバージョンに対応する必要がある場合は、`document.documentElement.scrollLeft` や `document.body.scrollTop` などのプロパティを使用することができます。ただし、これらのプロパティはブラウザによって挙動が異なる場合があるため注意が必要です。

まとめ

この記事では、JavaScriptを用いたスクロール位置の取得方法について解説しました。`window.scrollX` と `window.scrollY` プロパティを使用することで、簡単にスクロール位置を取得することができます。これらのプロパティを活用することで、より高度なWebページの制作が可能になります。

参考資料

FAQ

Q1. スクロール位置をリアルタイムに取得するにはどうすればよいですか？

A1. `window.addEventListener('scroll', ...)` を使用して、スクロールイベントが発生するたびにスクロール位置を取得する処理を実行します。上記の「使用例」のコードでは、スクロールイベントが発生するたびにスクロール位置を表示する処理を実装しています。

Q2. スクロール位置を特定の要素からの相対位置で取得するにはどうすればよいですか？

A2. `Element.getBoundingClientRect()` メソッドを使用することで、特定の要素の位置とサイズを取得することができます。この情報と `window.scrollX`、`window.scrollY` を組み合わせることで、特定の要素からの相対的なスクロール位置を計算することができます。

Q3. スクロール位置を取得する際に、スクロールバーの幅を考慮する必要はありますか？

A3. `window.scrollX` と `window.scrollY` は、スクロールバーの幅を考慮した値を返します。そのため、スクロール位置を取得する際にスクロールバーの幅を考慮する必要はありません。

その他の参考記事:jquery スクロール位置