JavaScriptでスクロール位置を取得・設定する方法

Webサイトでは、現在のスクロール位置を取得したり、特定の位置へ自動スクロールさせたりする機能が必要になる場面が多々あります。

この記事では、画面全体（viewport）と特定のHTML要素内のスクロール位置をJavaScriptで取得および設定する方法を、サンプルコードを用いてわかりやすくに解説します。

画面全体のスクロール位置の取得と設定

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

ブラウザの画面全体（viewport）のスクロール位置は、以下のプロパティで取得できます。

  • window.scrollX
    • 水平方向（横方向）のスクロール量（ピクセル数）を取得する
  • window.scrollY
    • 垂直方向（縦方向）のスクロール量（ピクセル数）を取得する

サンプルコードを以下に示します。

// 画面全体の水平方向のスクロール位置を取得
const x = window.scrollX;
console.log('横方向のスクロール位置: ' + x); // 例: 100

// 画面全体の垂直方向のスクロール位置を取得
const y = window.scrollY;
console.log('縦方向のスクロール位置: ' + y); // 例: 200

画面全体のスクロール位置の設定

ブラウザの画面全体（viewport）のスクロール位置を設定する方法は主に2つあります。

1. 数値を直接指定する方法

window.scroll()またはwindow.scrollTo()を使用すると、画面のスクロール位置を設定できます。

第一引数に水平位置、第二引数に垂直位置を指定します。サンプルコードを以下に示します。

// 画面の左上（初期位置）にスクロール
window.scroll(0, 0);

// 画面の左上（初期位置）を基準に、横100ピクセル、縦200ピクセルにスクロール
window.scroll(100, 200);

// scrollTo()を用いても動作は同じです
window.scrollTo(100, 200);

window.scroll()とwindow.scrollTo()は基本的に同じ動作をします。

2. オブジェクト形式で指定する方法

window.scroll()にオブジェクトを渡すことで、スクロール位置だけでなく、スクロールの動作（アニメーションの有無など）も制御できます。主なプロパティは以下の通りです。

  • left
    • 水平方向（横方向）のスクロール位置を設定する
  • top
    • 垂直方向（縦方向）のスクロール位置を設定する
  • behavior
    • スクロールの動きを指定する
      • "auto"（または省略）: デフォルトの即時移動
      • "smooth": スムーズにスクロール
      • "instant": 即時にスクロール

サンプルコードを以下に示します。

// 画面の左上（初期位置）を基準に、スムーズに横100ピクセル、縦200ピクセルにスクロール
window.scroll({
  left: 100,
  top: 200,
  behavior: 'smooth',
});

// behaviorプロパティを指定しない場合は即時に移動
window.scroll({
  left: 100,
  top: 200,
});

現在の位置から相対的にスクロールさせる方法

特定の位置へ絶対的にスクロールさせる方法だけでなく、現在のスクロール位置から相対的にスクロールさせる場合には、window.scrollBy()を使用します。このメソッドは、現在のスクロール位置に対して指定した値を加算するため、現在の位置から任意の距離だけスクロールを移動させることができます。サンプルコードを以下に示します。

// 現在の位置から横100ピクセル、縦200ピクセルにスクロール
window.scrollBy(100, 200);

window.scrollBy()もwindow.scroll()と同様にオブジェクトを渡すことで、スクロール位置だけでなく、スクロールの動作（アニメーションの有無など）も制御できます。サンプルコードを以下に示します。

// スムーズに横50ピクセル、縦100ピクセルにスクロール
window.scrollBy({
  left: 100,
  top: 200,
  behavior: 'smooth'
});

要素内のスクロール位置の取得と設定

要素内のスクロール位置の取得

画面全体ではなく、特定のHTML要素内のスクロール位置を取得する場合、対象要素の以下のプロパティを利用します。

  • element.scrollLeft
    • 要素の水平方向（横方向）のスクロール量（ピクセル数）を取得する
  • element.scrollTop
    • 要素の垂直方向（縦方向）のスクロール量（ピクセル数）を取得する

サンプルコードを以下に示します。

// HTML内の要素を取得（例: id="ele"）
const ele = document.getElementById('ele');

// 要素内の水平方向のスクロール位置を取得
const x = ele.scrollLeft;
console.log("要素の横方向のスクロール位置: " + x);

// 要素内の垂直方向のスクロール位置を取得
const y = ele.scrollTop;
console.log("要素の縦方向のスクロール位置: " + y);

要素内のスクロール位置の設定

要素内のスクロール位置を設定する場合には、scrollLeftとscrollTopに数値を代入します。

// HTML内の要素を取得（例: id="ele"）
const ele = document.getElementById('ele');

// 要素のスクロール位置を左上（初期位置）に設定
ele.scrollLeft = 0;
ele.scrollTop = 0;

「スクロール位置取得」ボタンで要素内のスクロール位置を取得して表示し、「初期位置に戻す」ボタンでスクロール位置をリセットするサンプルコードを以下に示します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>スクロール位置の取得・設定サンプル</title>
    <style>
      /* スクロール可能なボックス */
      #scrollBox {
        width: 300px;
        height: 150px;
        overflow: scroll;
        border: 1px solid #ccc;
      }
      /* ボックス内の内容 */
      .content {
        width: 600px;
        height: 300px;
        background: orange;
      }
    </style>
  </head>
  <body>
    <div id="scrollBox">
      <div class="content"></div>
    </div>

    <p id="scrollPosX">X: 0</p>
    <p id="scrollPosY">Y: 0</p>

    <button onclick="getScrollPosition()">スクロール位置取得</button>
    <button onclick="resetScrollPosition()">初期位置に戻す</button>

    <script>
      // スクロール位置を取得して表示する関数
      function getScrollPosition() {
        const scrollBox = document.getElementById('scrollBox');
        const x = scrollBox.scrollLeft;
        const y = scrollBox.scrollTop;
        document.getElementById('scrollPosX').textContent = 'X: ' + x;
        document.getElementById('scrollPosY').textContent = 'Y: ' + y;
      }

      // スクロール位置を初期位置（0, 0）に戻す関数
      function resetScrollPosition() {
        const scrollBox = document.getElementById('scrollBox');
        scrollBox.scrollLeft = 0;
        scrollBox.scrollTop = 0;
      }
    </script>
  </body>
</html>