MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Element.scrollLeft

La propiedad Element.scrollLeft obtiene o establece el número de píxeles que desplaza el contenido de un elemento hacia la izquierda.

Tenga en cuenta que si el elemento dirección del elemento es rtl (derecha-a-izquierda), entonces scrollLeft es 0 cuando la barra de desplazamiento está en su posición más a la derecha (al inicio del contenido desplazado) y cada vez más Negativo mientras se desplaza hacia el final del contenido.

Síntasix

// Obtener el número de píxeles desplazados
var sLeft = element.scrollLeft;

SLeft es un número entero que representa el número de píxeles que el elemento ha desplazado hacia la izquierda.

// Establecer el número de píxeles desplazados
element.scrollLeft = 10;

ScrollLeft se puede establecer en cualquier valor entero, sin embargo:

  • Si el elemento no se puede desplazar (por ejemplo, no tiene desbordamiento), scrollLeft se establece en 0.
  •  Si se establece en un valor menor que 0 (mayor que 0 para elementos de derecha a izquierda), scrollLeft se establece en 0.
  • Si se establece en un valor mayor que el máximo que se puede desplazar el contenido, scrollLeft se establece en el valor máximo.

Ejemplo

<!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> 

Especificaciones

Especificación Estado Comentario
CSS Object Model (CSSOM) View Module
The definition of 'scrollLeft' in that specification.
Working Draft  

Compatibilidad en los navegadores

Función Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte Básico (Yes) ? ? ? ?
Función Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Soporte Básico ? (Yes) ? ? ? ? ? (Yes)

Referencias

MSDN: scrollLeft Property

Etiquetas y colaboradores del documento

 Colaboradores en esta página: SoftwareRVG
 Última actualización por: SoftwareRVG,