Element: scrollTop-Eigenschaft

Ein Gleitkommawert mit doppelter Genauigkeit, der die Anzahl der Pixel angibt, um die das Element derzeit vertikal vom Ursprung gescrollt ist, wobei ein positiver Wert bedeutet, dass das Element nach unten gescrollt ist (um mehr Inhalt am unteren Rand anzuzeigen). Wenn das Element überhaupt nicht vertikal gescrollt wurde, ist scrollTop 0. Wenn das Dokument nicht das aktive Dokument ist, ist der zurückgegebene Wert 0. Wenn das Dokument auf einem subpixelgenauen Gerät gerendert wird, ist der zurückgegebene Wert ebenfalls subpixelgenau und kann eine Dezimalkomponente enthalten.

Es ist möglich, dass scrollTop negativ ist, wenn das Element aus dem anfänglichen umschließenden Block nach oben gescrollt werden kann. Zum Beispiel, wenn die flex-direction des Elements column-reverse ist und der Inhalt nach oben wächst, ist scrollTop 0, wenn sich die Bildlaufleiste an ihrer untersten Position (am Anfang des gescrollten Inhalts) befindet, und wird zunehmend negativ, wenn man zum Ende des Inhalts scrollt.

Safari reagiert auf Über-Scrollen, indem es scrollTop über die maximale Scroll-Position hinaus aktualisiert (es sei denn, der Standard-"Bounce"-Effekt ist deaktiviert, z. B. indem man overscroll-behavior auf none setzt), während Chrome und Firefox dies nicht tun. Auf Safari kann scrollTop beispielsweise negativ sein, wenn man weiter nach oben scrollt, obwohl das Element bereits oben ist.

Die scrollTop-Eigenschaft kann gesetzt werden, wodurch das Element auf die angegebene vertikale Position scrollt, auf die gleiche Weise wie bei der Verwendung von Element.scroll() mit behavior: "auto".

In diesem Beispiel versuchen Sie, den Container mit der gestrichelten Umrandung zu scrollen, und sehen Sie, wie sich der Wert von scrollTop ändert.

HTML

<div id="container">
  <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 id="output">scrollTop: 0</div>

CSS

#container {
  overflow: scroll;
  height: 150px;
  width: 150px;
  border: 5px dashed orange;
}

#output {
  padding: 1rem 0;
}

JavaScript

const container = document.querySelector("#container");
const output = document.querySelector("#output");

container.addEventListener("scroll", (event) => {
  output.textContent = `scrollTop: ${container.scrollTop}`;
});

Ergebnis

• Bestimmen der Dimensionen von Elementen
• HTMLElement.offsetTop
• Element.clientTop
• Element.scrollHeight
• Element.scrollWidth
• Element.scrollLeft
• Element.getBoundingClientRect()
• Element.scrollTo()