Window scrollX属性

定義と使用方法

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

scrollX は読み取り専用です。

属性

scrollX 属性は pageXOffset 属性を使用してください。

ブラウザ間の互換性を確保するために、以下の window.pageXOffset ではなく window.scrollX。

参照：

pageXOffset属性

pageYOffset属性

例

例 1

内容を100ピクセルスクロールし、scrollXとscrollYを表示します：

window.scrollBy(100, 100);
alert(window.scrollX + window.scrollY);

実際に試してみてください

例 2

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

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

実際に試してみてください

構文

window.scrollX

または：

scrollX

返り値

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

ブラウザのサポート

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

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