Element: scrollTop プロパティ

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月⁩.

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

const scroller = document.querySelector("#scroller");
const output = document.querySelector("#output");
scroller.addEventListener("scroll", (event) => {
 output.textContent = `scrollTop: ${scroller.scrollTop}`;
});