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 julho de 2015.
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
Loading…