Element.scrollTop
Element.scrollTop
プロパティは、要素の内容が垂直にスクロールするピクセル数を取得または設定します。
要素の scrollTop
の値は、要素の上から最も上の表示されているコンテンツまでの距離を測ったものです。要素の内容が垂直スクロールバーを生成しなかった場合は、 scrollTop
の値は 0
になります。
scrollTop
がルート要素 (<html>
要素) に対して使用されると、ウィンドウの scrollY
が返されます。 これは scrollTop
の特例です。
画面の拡大縮小を使用するシステムでは、 scrollTop
が小数になることがあります。
構文
// スクロールしたピクセル数を取得 var intElemScrollTop = someElement.scrollTop;
このコードを実行した後、 intElemScrollTop
はこの要素 (Element
) が上方向にスクロールしたピクセル数に対応した整数になります。
// スクロールするピクセル数を設定
element.scrollTop = intValue;
scrollTop
は任意の整数値で設定することができます。しかし、
- 要素がスクロールできない場合 (例えば、はみ出した部分がない場合や、要素に "non-scrollable" のプロパティがある場合)、
scrollTop
は0
に設定されます。 scrollTop
は負の数には対応していません。代わりに、0
に戻ります。- 指定された値が、コンテンツがスクロールできる最大値を超えていたら、
scrollTop
は最大値に設定されます。
例
padding-top
If you can see this, scrollTop = 0Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
If you can see this, scrollTop is > 0Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
If you can see this, scrollTop is maxed-outpadding-bottom
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Object Model (CSSOM) View Module scrollTop の定義 |
草案 |
ブラウザーの互換性
BCD tables only load in the browser