Window pageXOffset 属性

定義と使用方法

pageXOffset 属性はドキュメントがウィンドウの左上隅からスクロールしたピクセル数を返します。

pageXOffset 属性は scrollX 属性。

pageXOffset 属性は読み取り専用です。

参照：

screenX 属性

screenY 属性

例

例 1

内容を100ピクセルスクロールし、pageXOffsetとpageYOffsetを提示します：

window.scrollBy(100, 100);
alert(window.pageXOffset + window.pageYOffset);

自分で試してみてください

例 2

粘性ナビゲーションバーの作成：

// ナビゲーションバーを取得します
const navbar = document.getElementById("navbar");
// ナビゲーションバーのオフセット位置を取得します
const sticky = navbar.offsetTop;
// ユーザーがそのスクロール位置に到達した場合、stickyクラスをナビゲーションバーに追加します。スクロール位置を離れた場合、stickyクラスを削除します。
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

自分で試してみてください

構文

window.pageXOffset

または：

pageXOffset

戻り値

タイプ 説明
数字 ドキュメントがウィンドウの左上隅からスクロールしたピクセル数です。

ブラウザのサポート

すべてのブラウザがサポートしています window.pageXOffset：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート 9-11 サポート サポート サポート サポート