Element: scrollLeft-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

Die Element.scrollLeft-Eigenschaft ruft die Anzahl der Pixel ab oder legt sie fest, um die der Inhalt eines Elements von seiner linken Kante gescrollt wurde. Diese Zahl ist in modernen Browsern subpixelgenau, was bedeutet, dass sie nicht unbedingt eine Ganzzahl ist.

Wert

Ein Gleitkommawert doppelter Genauigkeit, der die Anzahl der Pixel angibt, um die das Element derzeit horizontal vom Ursprung gescrollt worden ist, wobei ein positiver Wert bedeutet, dass das Element nach rechts gescrollt wird (um mehr Inhalt auf der rechten Seite anzuzeigen). Wenn das Element überhaupt nicht nach links oder rechts gescrollt wird, ist scrollLeft 0. Wenn das Dokument nicht das aktive Dokument ist, beträgt der zurückgegebene Wert 0. Wenn das Dokument auf einem Gerät mit subpixelgenauer Darstellung gerendert wird, ist der zurückgegebene Wert ebenfalls subpixelgenau und kann eine Dezimalkomponente enthalten.

Es ist möglich, dass scrollLeft negativ ist, wenn das Element von dem initialen umschließenden Block nach links gescrollt werden kann. Zum Beispiel, wenn die direction des Elements rtl (von rechts nach links) ist und der Inhalt nach links wächst, ist scrollLeft 0, wenn die Bildlaufleiste in ihrer rechten Endposition ist (am Anfang des gescrollten Inhalts), und zunehmend negativ, wenn Sie zum Ende des Inhalts scrollen.

Safari reagiert auf Überrollen, indem es scrollLeft über die maximale Scrollposition hinaus aktualisiert (es sei denn, der Standard-"Bounce"-Effekt ist deaktiviert, z.B. durch Setzen von overscroll-behavior auf none), während Chrome und Firefox dies nicht tun.

Die scrollLeft-Eigenschaft kann gesetzt werden, was dazu führt, dass das Element zur angegebenen horizontalen Position scrollt, in derselben Weise wie bei der Verwendung von Element.scroll() mit behavior: "auto".

Beispiele

HTML

html
<div id="container">
  <div id="content">Click the button to slide right!</div>
</div>

<button id="slide" type="button">Slide right</button>

CSS

css
#container {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  overflow-x: scroll;
}

#content {
  width: 250px;
  background-color: #ccc;
}

JavaScript

js
const button = document.getElementById("slide");

button.onclick = () => {
  document.getElementById("container").scrollLeft += 20;
};

Ergebnis

Spezifikationen

Specification
CSSOM View Module
# dom-element-scrollleft

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch