diff options
Diffstat (limited to 'files/de/web/api/element/scrollleft/index.html')
| -rw-r--r-- | files/de/web/api/element/scrollleft/index.html | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/files/de/web/api/element/scrollleft/index.html b/files/de/web/api/element/scrollleft/index.html new file mode 100644 index 0000000000..90c28a203e --- /dev/null +++ b/files/de/web/api/element/scrollleft/index.html @@ -0,0 +1,83 @@ +--- +title: Element.scrollLeft +slug: Web/API/Element/scrollLeft +translation_of: Web/API/Element/scrollLeft +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Die <strong><code>Element.scrollLeft</code></strong> Eigenschaft setzt die Anzahl an Pixel, die der Inhalt eines Elements nach links gescrollt wird, oder liefert diese zurück.</p> + +<p>Beachten Sie: Wenn die Eigenschaft {{cssxref("direction")}} des Elements den Wert <code>rtl</code> (right-to-left) aufweist, ist <code>scrollLeft</code> <code>0</code>, falls der Scrollbalken ganz rechts ist (am Anfang des gescrollten Inhalts), und nimmt zunehmend negative Werte an, wenn man gegen Ende des Inhalts scrollt.</p> + +<h2 id="Syntax_and_values" name="Syntax_and_values">Syntax</h2> + +<pre class="eval">// Liefert die Anzahl der gescrollten Pixel +var <var>sLeft</var> = <var>element</var>.scrollLeft; +</pre> + +<p><var>sLeft</var> ist ein Integer-Wert, der die Anzahl der Pixel repräsentiert, die <var>element</var> nach links gescrollt ist.</p> + +<pre class="eval">// Set the number of pixels scrolled +<var>element</var>.scrollLeft = 10; +</pre> + +<p><code>scrollLeft</code> kann als Integerwert gesetzt werden. Dabei gilt:</p> + +<ul> + <li>Wenn das erste Element nicht gescrollt werden kann (wenn es z.B. keinen overflow hat), erhält <code>scrollLeft</code> den Wert 0.</li> + <li>Wenn ein Wert kleiner als 0 gesetzt wird (größer als 0 für right-to-left Elemente), erhält <code>scrollLeft</code> den Wert 0.</li> + <li>Wenn der Maximalwert, den der Inhalt des gescrollten Elements annehmen kann, überschritten wrid, erhält <code>scrollLeft</code> (nur) den Maximalwert.</li> +</ul> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush: html"><!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> +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{Compat("api.Element.scrollLeft")}}</p> |