目次
JavaScriptでブラウザのスクロール量を取得する方法のご紹介です。
スクロール量を取得するだけの処理を作るというのは考えにくいですが、スクロールした後に何か処理をしたい、というような場合にお役に立つかと思います。
本記事の内容
- 縦方向のスクロール量を取得する
- 横方向の対するスクロール量を取得する
- scrollXとscrollYについて
では解説していきます。
スポンサーリンク
縦方向のスクロール量を取得する
縦方向のスクロールを取得する方法になります。縦方向のスクロールを取得するには「pageYOffset」を使用します。
具体的には、下記のように記述します。windowオブジェクトのpageYOffsetで取得できます。
window.pageYOffset;
試しにスクロールイベントが発生した際にスクロール量をコンソールに出力してみます。
window.addEventListener('scroll', ()=> {
console.log(window.pageYOffset);
});
上記を実行すると下記のデモのように縦方向のスクロール量を取得することができます。出力方法を変更して、簡単なスタイルを適用しております。（小数点以下は切り捨てています。）
See the Pen window.pageYOffset｜JavaScript by ryoy (@intotheprogram) on CodePen.
以上が縦方向のスクロール量を取得する方法です。より詳しく知りたい方は下記のリンクを見ていただければと存じます。
横方向の対するスクロール量を取得する
続いて、横方向のスクロール量を取得する方法になります。
「YをXに変えるだけかな？」
とお察しの方もいらっしゃるかと思いますが、まさしくその通りです。
縦方向のスクロール量を取得するには「pageYOffset」を使用しましたが、横方向のスクロール量は「pageXOffset」を使って取得します。
具体的には、下記のように記述します。windowオブジェクトのpageXOffsetで取得できます。
window.pageXOffset;
試しにスクロールイベントが発生した際に現在のスクロール量をコンソールに出力してみます。
window.addEventListener('scroll', ()=> {
console.log(window.pageXOffset);
});
下記は、縦方向でご紹介したデモと同じ仕様で作った、横方向のスクロール量を取得するデモになります。
See the Pen XyVoEN by ryoy (@intotheprogram) on CodePen.
pageXOffsetは、下記のリンク先に詳しい説明があります。英語ページとなりますので、翻訳してご覧ください。
スポンサーリンク
scrollXとscrollYについて
縦方向と横方向の取得方法として、「pageYOffset」と「pageXOffset」をご紹介しました。
基本的には上記の方法で実装していただいて大丈夫です。ただ、IEを考慮する必要がないのであれば下記の方法でも縦横のスクロール方法を取得することが可能となっています。
scrollY
scrollYは縦方向のスクロール量を取得することができます。使い方は「pageYOffset」の部分を「scrollY」に置き換えます。
window.scrollY;
scrollX
scrollXは横方向のスクロール量を取得することができます。使い方は「pageXOffset」の部分を「scrollX」に置き換えます。
window.scrollX;
下記のリンクをみていただければお分かりいただけますが、IEには対応しておりませんので、使用される際にはご注意ください。
Window.scrollY - Web APIs | MDN
Window.scrollX - Web APIs | MDN
まとめ
最後に縦方向、横方向のスクロール量の取得方法をまとめます。
- 縦方向：window.pageYOffset
- 横方向：window.pageXOffset
IEを考慮されない場合は下記方法での記述も可能です。
- 縦方向：window.scrollY
- 横方向：window.scrollX
本記事でご紹介したスクロール量を取得する方法は、Web制作をする上でよく使用する処理になります。スクロールして固定であったり、スクロール位置によって色を変えたり、スクロールして非表示にしたりと用途は様々です。色々な場面で活かせる処理かと思いますので、多様な表現を身につけていただければ幸いです。
以上、JavaScriptのpageYOffsetとpageXOffsetでスクロール量を取得する方法のご紹介でした！
