Element: scrollTop プロパティ
Element.scrollTop
プロパティは、要素の内容が垂直にスクロールするピクセル数を取得または設定します。
要素の scrollTop
の値は、要素の上から最も上の表示されているコンテンツまでの距離を測ったものです。要素の内容が垂直スクロールバーを生成しなかった場合は、 scrollTop
の値は 0
になります。
scrollTop
には任意の整数値を設定することができますが、注意点があります。
- 要素がスクロールできない場合(例えば、オーバーフローがない、または要素に "non-scrollable" のプロパティがある場合)、
scrollTop
は0
です。 scrollTop
は負の値には反応せず、代わりに0
に設定します。- 要素で利用できる最大値よりも大きな値を設定するには、
scrollTop
は最大値に決定します。
scrollTop
がルート要素(<html>
要素)に対して使用されると、ウィンドウの scrollY
が返されます。これは scrollTop
の特例です。
警告: 画面の拡大縮小を使用するシステムでは、scrollTop
が小数になることがあります。
値
数値です。
例
要素のスクロール
この例で、破線の境界線の付いた内部のコンテナーをスクロールしてみて、scrollTop
の値がどのように変わるかを確認してください。
HTML
html
<div id="container">
<div id="scroller">
<p>
Far out in the uncharted backwaters of the unfashionable end of the
western spiral arm of the Galaxy lies a small unregarded yellow sun.
Orbiting this at a distance of roughly ninety-two million miles is an
utterly insignificant little blue green planet whose ape-descended life
forms are so amazingly primitive that they still think digital watches are
a pretty neat idea.
</p>
</div>
</div>
<div id="output">scrollTop: 0</div>
CSS
css
#scroller {
overflow: scroll;
height: 150px;
width: 150px;
border: 5px dashed orange;
}
#output {
padding: 1rem 0;
}
JavaScript
js
const scroller = document.querySelector("#scroller");
const output = document.querySelector("#output");
scroller.addEventListener("scroll", (event) => {
output.textContent = `scrollTop: ${scroller.scrollTop}`;
});
結果
仕様書
Specification |
---|
CSSOM View Module # dom-element-scrolltop |
ブラウザーの互換性
BCD tables only load in the browser