Window scrollYプロパティ

定義と使用法

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

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

属性

scrollY プロパティは pageYOffset プロパティ

クロスブラウザ互換性のために、以下のプロパティを使用してください。 window.pageYOffset ではなく window.scrollY。

参照してください：

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

または：

scrollY

返り値

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

ブラウザのサポート

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

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