Element.scrollLeft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

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

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

Specification
CSSOM View Module
# dom-element-scrollleft

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
scrollLeft

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Has more compatibility info.