ウィンドウpageXOffset
例1
コンテンツを100ピクセルスクロールし、pageXOffsetとpageYOffsetに警告します。
window.scrollBy(100, 100);
alert(window.pageXOffset + window.pageYOffset);
以下のその他の例。
定義と使用法
このpageXOffset
プロパティは、ドキュメントがウィンドウの左上隅からスクロールしたピクセルを返します。
プロパティはpageXOffset
プロパティと同じscrollX
です。
pageXOffset
プロパティは読み取り専用です。
構文
window.pageXOffset
あるいは単に:
pageXOffset
戻り値
タイプ | 説明 |
数 | ドキュメントがウィンドウの左上隅からスクロールしたピクセル数。 |
その他の例
粘着性のあるナビゲーションバーを作成します。
// Get the navbar
const navbar = document.getElementById("navbar");
// Get the offset position of the navbar
const sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove the sticky class when you leave the scroll position.
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
ブラウザのサポート
window.pageXOffset
すべてのブラウザでサポートされています:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |