Element.scrollLeft

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

A propriedade Element.scrollLeft obtem, ou define o número de pixels do contéudo de um elemento que é rolado para a esquerda.

Note que se os direction do elemento do elemento é rtl (direita-para-esquerda) então scrollLeft é 0 quando a barra de rolagem está na posição mais à direita (o início do conteúdo rolado) e então, fica cada vez mais negativa à medida que se desloca em direção ao fim do conteúdo.

Sintaxe

// Obtem o número de pixels rolado
var sLeft = element.scrollLeft;

sLeft é um inteiro representando o número de pixels do elemento que foi movido para a esquerda.

// Define o número de pixels rolado
element.scrollLeft = 10;

scrollLeft pode ser definido para qualquer valor inteiro, entretanto:

  • Se o elemento não pode ser rolado (ex.: ele é no overflow), scrollLeft é definido para 0.
  • Se definido um valor menor que 0 (maior que 0 para elementos direita-para-esquerda), scrollLeft é definido para 0.
  • Se o definido um valor maior que o máximo, que o conteúdo pode ser rolado, éscrollLeft é definido para o valor máximo.

Exemplo

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

Especificações

Especificações Status Comentário
CSS Object Model (CSSOM) View Module
The definition of 'scrollLeft' in that specification.
Rascunho atual  

Referências

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
scrollLeftChrome Full support 43
Notes
Full support 43
Notes
Notes For right-to-left elements, this property uses 0-100 (most left to most right) instead of negative values. See bug 721759.
Edge Full support 12
Notes
Full support 12
Notes
Notes From Edge 79, for right-to-left elements, this property uses 0-100 (most left to most right) instead of negative values. See bug 721759.
Notes Before Edge 79, for right-to-left elements, this property uses 100-0 (most left to most right) instead of negative values.
Firefox Full support 1IE Full support 8
Notes
Full support 8
Notes
Notes For right-to-left elements, this property uses 100-0 (most left to most right) instead of negative values.
Opera Full support 8Safari Full support 6WebView Android Full support 43
Notes
Full support 43
Notes
Notes For right-to-left elements, this property uses 0-100 (most left to most right) instead of negative values. See bug 721759.
Chrome Android Full support 43
Notes
Full support 43
Notes
Notes For right-to-left elements, this property uses 0-100 (most left to most right) instead of negative values. See bug 721759.
Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 6Samsung Internet Android Full support 4.0

Legend

Full support  
Full support
See implementation notes.
See implementation notes.