Window pageYOffset属性

定義と使用方法

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

pageYOffset 属性が等しい scrollY 属性。

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

も参照してください：

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.pageYOffset

または：

pageYOffset

返り値

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

ブラウザサポート

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

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