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

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
La definición de 'scrollLeft' en esta especificación.
Working Draft  

Compatibilidad en los navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,