【JavaScript】現在のページのスクロール位置を取得する方法

こんにちは！CODE CLUB965のKです！

今回は、JavaScriptで現在のページのスクロール量を取得する方法について書いていきます。

縦方向のスクロール量を取得する

縦方向のスクロールを取得するには「pageYOffset」を使用します。

以下のように書けば縦方向のスクロール量が取得できます。

window.addEventListener('scroll', function(event) {
  console.log(window.pageYOffset);  // 縦方向のスクロール量
});

スクロールされた時にログが出力されるように記述しています。

横方向のスクロール量を取得する

縦方向とほとんど同じですが、横方向のスクロールを取得するには「pageXOffset」を使用します。

以下のように書けば横方向のスクロール量が取得できます。

window.addEventListener('scroll', function(event) {
  console.log(window.pageXOffset); // 横方向のスクロール量
});

補足

上記の方法以外の方法としては、「scrollX」と「scrollY」を使えばスクロール量を取得できます。

横方向：window.scrollX;
縦方向：window.scrollY;

ただし、IEには対応していないので結果として上記の「pageXOffset」「pageYOffset」を使う方が無難です。

最後に

スクロール量の取得は、Web制作をする上でよく使用されます。
スクロール位置によって色を変えたり、スクロールして固定したり非表示にしたりと様々です。
ぜひ、上記で書いたことを活かせてもらえればと思います。

それでは、また！

Follow me!