この記事で分かること
pageXOffset・pageYOffsetの基本的な意味- 現在のスクロール位置を取得する方法
scrollTo/scrollByとの違いscrollX/scrollYとの関係- 実用的な取得・活用例
pageXOffset と pageYOffset は、ページがどれだけスクロールされているかを取得するためのプロパティです。
横方向（X軸）・縦方向（Y軸）のスクロール量をピクセル単位で参照できます。
pageXOffset・pageYOffsetとは？
これらのプロパティは、ウィンドウの左上からのスクロール量を表します。
pageXOffset：横方向のスクロール量（px）pageYOffset：縦方向のスクロール量（px）
ページがどれだけスクロールされているかを調べたいときに便利です。
モダンブラウザでは window.scrollX / window.scrollY と同じ意味になります。
let x = window.pageXOffset;
let y = window.pageYOffset;
→ 現在のスクロール位置を取得できます。
使用例：スクロール位置を設定する（非推奨）
一部の古いブラウザではスクロール量を直接設定できましたが、
モダンブラウザでは pageXOffset / pageYOffset を書き換えることはできません。
スクロール位置を変更したい場合は scrollTo() を使用します。
// スクロール位置を設定する正しい方法
window.scrollTo(250, 0);
使用例：スクロール位置を取得する
let yo = window.pageYOffset;
→ 現在の縦方向のスクロール量が変数 yo に代入されます。
scrollTo / scrollBy との違い
pageXOffset/pageYOffset：現在のスクロール量を「取得」する用途が中心scrollTo()：指定位置へスクロール（絶対座標）scrollBy()：現在位置から相対的にスクロール
スクロール位置を調べたいときは pageXOffset / pageYOffset、
スクロールさせたいときは scrollTo / scrollBy を使うのが一般的です。
注意点
- 値はピクセル単位で取得される
- スクロールされていない場合は 0 が返る
- モダンブラウザでは
scrollX/scrollYと同じ - スクロール操作は
scrollTo()を使用する
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- スクロール位置の仕組みを基礎から理解したい
- ブラウザの座標系や描画の流れを体系的に学びたい
- ネット記事だけだと情報が断片的に感じる
pageXOffset / pageYOffset のようなスクロール位置の取得は、JavaScript の
座標系・ブラウザ描画・DOM の理解が欠かせません。
書籍ではこれらの基礎を順序立てて学べるため、スクロール量の仕組みを深く理解できます。
いちばんやさしい JavaScript の教本
図解が多く、ブラウザの表示領域やスクロールの仕組みを視覚的に理解できる入門書です。
pageXOffset / pageYOffset の前提となる「座標の考え方」や「ページ構造」を丁寧に学べます。
この本で解決できること：
- スクロール位置の取得がどのように行われるか理解できる
scrollTo/scrollByとの役割の違いが分かる- 実際に動くサンプルで理解が深まる
確かな力が身につく JavaScript「超」入門
スクロール位置の取得・座標系・ブラウザ描画など、より深い理解を得たい方に最適な入門書です。
実務レベルの UI 実装にも役立ちます。
この本で解決できること：
pageXOffset/pageYOffsetの仕組みを体系的に学べるscrollX/scrollYとの関係が理解できる- 現代的な JavaScript の書き方が身につく
動画で理解を深めたい方へ（Udemy講座）
pageXOffset / pageYOffset のようなスクロール位置の取得は、実際のページの動きを見ながら学ぶと理解が一気に深まります。
動画ではスクロール量の変化がそのまま確認できるため、初心者でも直感的に理解できます。
初心者のためのJavaScript 完全入門
DOM 操作・イベント・ブラウザの動作など、スクロール位置の理解に必要な基礎を体系的に学べる人気講座です。
この講座で解決できること：
- スクロール量がどのように取得されるか視覚的に理解できる
pageXOffset/pageYOffsetとscrollTo/scrollByの違いが明確になる- 初心者がつまずきやすいポイントを丁寧に解説
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
スクロール位置の取得・UI 操作・座標系など、実務で必要なブラウザ操作を深く理解したい方に最適な講座です。
この講座で解決できること：
pageXOffset/pageYOffsetを使った UI 実装の実践的なテクニックが身につくscrollX/scrollYとの関係を理解し、モダンな書き方を習得できる- 現代的な JavaScript の書き方をまとめて習得
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
- スクロール位置の仕組みが曖昧なままになる
- 座標系やブラウザ描画の理解が断片的になりやすい
- UI 実装でつまずいても相談できない
- 学習の順番に自信が持てない
スクールでは、プロの講師が学習ロードマップを作成し、
pageXOffset / pageYOffset のようなスクロール位置の取得も含めて、JavaScript を体系的に理解できるようサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- スクロール位置・座標系・ブラウザ描画の理解を深めるアドバイスがもらえる
- 効率的な学習方法をプロが提案
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
pageXOffset / pageYOffset に関するよくある質問（FAQ）
pageYOffset と scrollY の違いは？
モダンブラウザではどちらも同じ値を返します。scrollY の方が新しい書き方です。
pageXOffset / pageYOffset を書き換えてスクロールできる？
いいえ。値の書き換えはできません。スクロール操作には scrollTo() を使います。
スクロール位置が 0 になるのはどんなとき？
ページが一番上（または左）にある場合は 0 が返ります。
スクロール量を取得するタイミングは？
scroll イベント内や、ユーザー操作後に取得すると正確な値が得られます。
まとめ
pageXOffset：横方向のスクロール量pageYOffset：縦方向のスクロール量- 現在のスクロール位置を調べるのに便利
- スクロール操作には
scrollTo/scrollByを併用すると効果的
