Element.scrollLeft

Diese Übersetzung ist unvollständig. Bitte helfen Sie uns, 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
scrollLeftChrome Vollständige Unterstützung 43Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 8Opera Vollständige Unterstützung 8Safari Vollständige Unterstützung 6WebView Android Vollständige Unterstützung 43Chrome Android Vollständige Unterstützung 43Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 10.1Safari iOS Vollständige Unterstützung 6Samsung Internet Android Vollständige Unterstützung 4.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung