Window: scrollX プロパティ
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
scrollX は Window インターフェイスの読み取り専用プロパティで、文書が現在水平方向にスクロールしているピクセル数を返します。最近のブラウザーでは、この値はサブピクセル精度ですので、必ずしも整数であるとは限りません。文書が垂直方向にスクロールしているピクセル数は scrollY プロパティで取得できます。
値
倍精度浮動小数点値で、文書が現在原点から水平方向にスクロールされているピクセル数を示します。正の値はコンテンツが右方向にスクロールされていることを意味します（右側にさらにコンテンツを表示するため）。より技術的に言えば、scrollX は現在のビューポートの左端の X 座標を返します。文書が左右どちらにもスクロールされていない場合、scrollX は 0 です。ビューポートが存在しない場合、返される値は 0 です。文書がサブピクセル精度の端末でレンダリングされている場合、返される値もサブピクセル精度となり、小数点以下の成分を含むことがあります。
メモ:
整数値が必要である場合は、Math.round() を使用して四捨五入してください。
文書が最初のコンテナーブロックから左方向にスクロール可能な場合、scrollX が負の値になる可能性があります。例えば、文書が右から左方向で、コンテンツが左方向に拡大する場合などが該当します。
Safari はオーバースクロールに対して、最大スクロール位置を超えて scrollX を更新することで応答します（デフォルトの「バウンス」効果が無効化されていない限り。例えば overscroll-behavior を none に設定した場合など）。一方、Chrome と Firefox はそうなりません。
このプロパティは読み取り専用です。ウィンドウを特定の位置にスクロールするには、Window.scroll() を使用してください。
例
これは、文書の現在の水平スクロール位置を確認する例です。400 ピクセルより大きい場合は、文書の左上にスクロール位置をリセットします。
if (window.scrollX > 400) {
window.scroll(0, 0);
}
メモ
pageXOffset プロパティは scrollX プロパティの別名です。つまり、いずれのプロパティも再割り当てしていない場合、window.pageXOffset === window.scrollX は常に真となります。
仕様書
| Specification |
|---|
| CSSOM View Module # dom-window-scrollx |