We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Die Element.scrollLeft Eigenschaft setzt die Anzahl an Pixel, die der Inhalt eines Elements nach links gescrollt wird, oder liefert diese zurück.

Beachten Sie:  Wenn die Eigenschaft direction des Elements den Wert rtl (right-to-left) aufweist,  ist scrollLeft 0, falls der Scrollbalken ganz rechts ist (am Anfang des gescrollten Inhalts),  und nimmt zunehmend negative Werte an, wenn man gegen Ende des Inhalts scrollt.

Syntax

// Liefert die Anzahl der gescrollten Pixel
var sLeft = element.scrollLeft;

sLeft ist ein Integer-Wert, der die Anzahl der Pixel repräsentiert, die element nach links gescrollt ist.

// Set the number of pixels scrolled
element.scrollLeft = 10;

scrollLeft kann als Integerwert gesetzt werden. Dabei gilt:

  • Wenn das erste Element nicht gescrollt werden kann (wenn es z.B. keinen overflow hat), erhält scrollLeft den Wert 0.
  • Wenn ein Wert kleiner als 0 gesetzt wird (größer als 0 für right-to-left Elemente), erhält scrollLeft den Wert 0.
  • Wenn der Maximalwert, den der Inhalt des gescrollten Elements annehmen kann, überschritten wrid, erhält scrollLeft (nur) den Maximalwert.

Beispiel

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #container {
            border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px;
        }
        #content {
            background-color: #ccc; width: 250px;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function () {   
            var button = document.getElementById('slide');
            button.onclick = function () {
                document.getElementById('container').scrollLeft += 20;
            };
        }, false);
    </script>
</head>
<body>
    <div id="container">
        <div id="content">Lorem ipsum dolor sit amet.</div>
    </div>
    <button id="slide" type="button">Slide</button>
</body>
</html> 

Spezifikationen

Spezifikation Status Kommentar
CSS Object Model (CSSOM) View Module
Die Definition von 'scrollLeft' in dieser Spezifikation.
Arbeitsentwurf  

Browserkompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Ja) (Ja) ? ? ? ?
Feature Android Android Webview Edge Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support ? (Ja) (Ja) ? ? ? ? ? (Ja)

References

MSDN: scrollLeft Property

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: floheller
Zuletzt aktualisiert von: floheller,