Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Element.scrollLeft

Esta tradução está incompleta. Ajude atraduzir 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 é rt1 (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.
Working Draft  

Referências

MSDN: scrollLeft Property

Etiquetas do documento e colaboradores

 Colaboradores desta página: eustabio_junior
 Última atualização por: eustabio_junior,