DiescrollLeft Eigenschaft derElement Schnittstelle gibt die Anzahl der Pixel an, um die der Inhalt eines Elements von seinem linken Rand gescrollt ist, oder legt diese fest. Dieser Wert ist in modernen Browsern subpixelgenau, was bedeutet, dass er nicht unbedingt eine ganze Zahl ist.

Wert

Ein Gleitkommawert mit doppelter Genauigkeit, der die Anzahl der Pixel angibt, um die das Element horizontal vom Ursprung gescrollt ist, wobei ein positiver Wert bedeutet, dass das Element nach rechts gescrollt ist (um mehr Inhalt auf der rechten Seite zu zeigen). Wenn das Element überhaupt nicht nach links oder rechts gescrollt ist, dann istscrollLeft 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, dassscrollLeft negativ ist, wenn das Element nach links vom anfänglichen Containerblock gescrollt werden kann. Zum Beispiel, wenn diedirection des Elementsrtl (rechts-nach-links) ist und der Inhalt nach links wächst, dann istscrollLeft0, wenn die Scrollleiste sich an ihrer rechten Position befindet (am Anfang des gescrollten Inhalts), und dann zunehmend negativ, wenn Sie zum Ende des Inhalts scrollen.

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

DiescrollLeft Eigenschaft kann festgelegt werden, wodurch das Element zur angegebenen horizontalen Position gescrollt wird, auf die gleiche Weise wie beim Verwenden vonElement.scroll() mitbehavior: "auto".

Beispiele

HTML

<div>  <div>Click the button to slide right!</div></div><button type="button">Slide right</button>

CSS

#container {  width: 100px;  height: 100px;  border: 1px solid #cccccc;  overflow-x: scroll;}#content {  width: 250px;  background-color: #cccccc;}

JavaScript

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

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Bestimmung der Dimensionen von Elementen
• HTMLElement.offsetLeft
• Element.clientLeft
• Element.scrollHeight
• Element.scrollWidth
• Element.scrollTop
• Element.getBoundingClientRect()
• Element.scrollTo()