Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

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 AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
scrollLeftChrome Full support 43Edge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support 6WebView Android Full support 43Chrome Android Full support 43Edge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

Etiquetas do documento e colaboradores

Colaboradores desta página: mdnwebdocs-bot, djornada, SphinxKnight, eustabio_junior
Última atualização por: mdnwebdocs-bot,