Método Window scrollBy()

Definição e uso

scrollBy() O método rola o documento para um número específico de pixels.

Dica:Para que scrollBy() O método funciona, o documento deve ser maior que a tela e a barra de rolagem deve ser visível.

Veja também:

Método scrollTo()

Exemplo

Exemplo 1

Rolar documento horizontalmente 100px:

window.scrollBy(100, 0);

Experimente você mesmo

Exemplo 2

Rolar documento verticalmente 100px:

window.scrollBy(0, 100);

Experimente você mesmo

Exemplo 3

Rolar documento para cima e para baixo:

<button onclick="scrollWin(0, 50)">Rolar para baixo</button>
<button onclick="scrollWin(0, -50)">Rolar para cima</button>
<script>
function scrollWin(x, y) {
  window.scrollBy(x, y);
}
</script>

Experimente você mesmo

Exemplo 4

Rolar documento para os lados:

<button onclick="scrollWin(100, 0)">Rolar para a direita</button>
<button onclick="scrollWin(-100, 0)">Rolar para a esquerda</button>
<script>
function scrollWin(x, y) {
  window.scrollBy(x, y);
}
</script>

Experimente você mesmo

Sintaxe

window.scrollBy(x, y)

ou:

scrollBy(x, y)

Parâmetro

Parâmetro Descrição
x

Obrigatório. O número de pixels a rolar (horizontalmente).

O valor positivo rola para a direita, o valor negativo rola para a esquerda.
y

Obrigatório. Número de pixels a rolar (verticalmente).

Valor positivo rola para baixo, valor negativo rola para cima.

Retorno

Nenhum.

Suporte do navegador

Todos os navegadores suportam scrollBy():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte Suporte