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

構文

var x = window.scrollX;

実際に返される値は、文書が原点から水平方向にスクロールされた量をピクセル数で表す倍精度浮動小数点数です。正の値は、内容物が左にスクロールされていることを表します。文書がサブピクセル精度のデバイスに表示されている場合は、戻り値も小数部を含むサブピクセル精度の値になります。文書が左にも右にもスクロールされていない場合の scrollX は 0 です。

整数値が必要である場合は、Math.round() を使用して切り捨てできます。

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

これは、文書の現在の水平スクロール位置を確認する例です。400 ピクセルより大きい場合は、文書の左上にスクロール位置をリセットします。

if (window.scrollX > 400) {
  window.scroll(0,0);
}

注記

pageXOffset プロパティは、scrollX プロパティのエイリアスです。:

window.pageXOffset == window.scrollX; // 常に true

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

var x = (window.pageXOffset !== undefined)
  ? window.pageXOffset
  : (document.documentElement || document.body.parentNode || document.body).scrollLeft;

var y = (window.pageYOffset !== undefined)
  ? window.pageYOffset
  : (document.documentElement || document.body.parentNode || document.body).scrollTop;

仕様

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

ブラウザー実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート (有) (有) (有) 未サポート (有) (有)
サブピクセル精度 (有) (有) 55 (55) 未サポート (有) (有)
機能 Android Android Webview Edge Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Android 版 Chrome
基本サポート ? (有) (有) (有) ? ? ? ? (有)
サブピクセル精度 (有) (有) (有) 55.0 (55) ? ? ? ? (有)

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, mamodayo, teoli, jsx, ethertank, nobuoka, Potappo
 最終更新者: yyss,