JavaScriptでスクロール位置を取得・操作する方法を完全解説！scrollTopなどDOM操作入門

1. スクロールとは何かを知ろう

1. スクロールとは何かを知ろう

スクロールとは、画面に入りきらない長いページを上下に動かして見る操作のことです。紙の本を上下にずらしながら読む感覚に近いです。

Webページでは、表示されている部分より下に文章や画像がある場合、マウスや指で画面を動かします。このときの「どれくらい動かしたか」がスクロール位置です。

2. JavaScriptでスクロール位置を扱う理由

2. JavaScriptでスクロール位置を扱う理由

JavaScriptでスクロール位置を取得できると、ページの動きに合わせた処理ができます。例えば、下まで読んだらボタンを表示する、といった動きです。

これはDOM操作の一つで、画面の状態を調べてプログラムが反応する仕組みです。難しく感じますが、数値を読むだけなので考え方は単純です。

3. scrollTopとは何か

3. scrollTopとは何か

scrollTopは、要素の中で上からどれだけスクロールしたかを数値で表すプロパティです。プロパティとは、あらかじめ用意された情報箱のようなものです。

数値の単位はピクセルで、画面の一番上が0です。下に動かすほど数値は大きくなります。

const area = document.getElementById("area");
console.log(area.scrollTop);

4. 実行結果のイメージ

4. 実行結果のイメージ

上のコードを実行すると、今表示している位置が数値で表示されます。ページを少し下に動かすと、表示される数値も変わります。

120

この場合、上から120ピクセル分だけ下に動いているという意味です。定規で距離を測っているようなイメージを持つと理解しやすくなります。

5. スクロール位置を動かす方法

5. スクロール位置を動かす方法

scrollTopは、値を読み取るだけでなく、数値を入れることでスクロール位置を動かすこともできます。

例えば、ボタンを押したら一番上に戻す、といった操作が可能です。

area.scrollTop = 0;

これにより、表示位置が一番上に戻ります。ページを強制的に動かしていると考えると分かりやすいです。

6. ページ全体のスクロール位置

6. ページ全体のスクロール位置

画面全体のスクロール位置を知りたい場合は、document.documentElement.scrollTopを使います。これはページ全体の現在位置を表します。

少し長い名前ですが、「ページ全体を表す場所」と覚えておくと問題ありません。

7. 初心者が注意したいポイント

7. 初心者が注意したいポイント

スクロール位置は、要素によって取得方法が変わります。間違った場所から取得すると、常に0になることがあります。

また、スクロールできない要素では数値が変わらない点にも注意が必要です。まずは「どこをスクロールしているのか」を意識することが大切です。