window.scrollY

Window インターフェイスの読み取り専用プロパティである scrollY は、文書が現在垂直方向にスクロールしているピクセル数を返します。最近のブラウザーでは、この値はサブピクセル精度ですので、必ずしも整数であるとは限りません。文書が水平方向にスクロールしているピクセル数は scrollX プロパティで取得できます。

構文

var y = window.scrollY

実際に返される値は、文書が原点から垂直方向にスクロールした量をピクセル数で表す倍精度浮動小数点値であり、正の値は、内容物が上にスクロールしていることを表します。文書がサブピクセル精度の端末に表示されている場合は、返値も小数部を含むサブピクセル精度の値になります。文書が上にも下にもスクロールしていない場合、 scrollY は 0 になります。

整数値が必要である場合は、 Math.round() を使用して四捨五入してください。

専門用語で説明すると scrollY は、現在の ビューポート の上端の Y 座標を返します。ビューポートがない場合の戻り値は 0 です。

// スクロールしている場合、戻してから次のページへスクロールダウン
if (window.scrollY) {
  window.scroll(0, 0); //文書の左上にスクロール位置をリセット
}

window.scrollByPages(1);

メモ

scrollBy()scrollByLines()scrollByPages() のような相対スクロールする関数を使用する際に、文書がすでにスクロールしていないかをチェックするためにこのプロパティを使用してください。

pageYOffset プロパティは、scrollY プロパティのエイリアスです。

window.pageYOffset === window.scrollY; // 常に true

クロスブラウザー互換性のため、window.scrollY ではなく window.pageYOffset を使用します。さらに、古いバージョンの Internet Explorer (IE9 以前) はいずれもサポートしていないため、チェックの上、なければ他の非標準の方法で回避する必要があります。以下に互換性を確保した例を示します。

var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

仕様書

仕様書 状態 備考
CSS Object Model (CSSOM) View Module
window.scrollY の定義
草案  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
scrollYChrome 完全対応 あり
完全対応 あり
完全対応 あり
代替名
代替名 非標準の名前 pageYOffset を使用しています。
Edge 完全対応 あり
完全対応 あり
完全対応 あり
代替名
代替名 非標準の名前 pageYOffset を使用しています。
Firefox 完全対応 あり
完全対応 あり
完全対応 あり
代替名
代替名 非標準の名前 pageYOffset を使用しています。
IE 未対応 なし
未対応 なし
完全対応 9
代替名
代替名 非標準の名前 pageYOffset を使用しています。
Opera 完全対応 あり
完全対応 あり
完全対応 あり
代替名
代替名 非標準の名前 pageYOffset を使用しています。
Safari 完全対応 あり
完全対応 あり
完全対応 あり
代替名
代替名 非標準の名前 pageYOffset を使用しています。
WebView Android 完全対応 あり
完全対応 あり
完全対応 あり
代替名
代替名 非標準の名前 pageYOffset を使用しています。
Chrome Android 完全対応 あり
完全対応 あり
完全対応 あり
代替名
代替名 非標準の名前 pageYOffset を使用しています。
Firefox Android 完全対応 あり
完全対応 あり
完全対応 あり
代替名
代替名 非標準の名前 pageYOffset を使用しています。
Opera Android 完全対応 あり
完全対応 あり
?
代替名
代替名 非標準の名前 pageYOffset を使用しています。
Safari iOS 完全対応 あり
完全対応 あり
?
代替名
代替名 非標準の名前 pageYOffset を使用しています。
Samsung Internet Android 完全対応 あり
完全対応 あり
?
代替名
代替名 非標準の名前 pageYOffset を使用しています。
Subpixel precisionChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 55IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 55Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報