Método Window scrollBy()

Definición y uso

scrollBy() El método desplaza el documento una cantidad específica de píxeles.

Consejo:Para que scrollBy() El método actúa, el documento debe ser mayor que la pantalla y la barra de desplazamiento debe estar visible.

Véase también:

Método scrollTo()

Ejemplo

Ejemplo 1

Desplazamiento horizontal del documento 100px:

window.scrollBy(100, 0);

Intente hacerlo usted mismo

Ejemplo 2

Desplazamiento vertical del documento 100px:

window.scrollBy(0, 100);

Intente hacerlo usted mismo

Ejemplo 3

Desplazamiento de arriba a abajo del documento:

<button onclick="scrollWin(0, 50)">Scroll hacia abajo</button>
<button onclick="scrollWin(0, -50)">Scroll hacia arriba</button>
<script>
function scrollWin(x, y) {
  window.scrollBy(x, y);
}
</script>

Intente hacerlo usted mismo

Ejemplo 4

Desplazamiento de izquierda a derecha del documento:

<button onclick="scrollWin(100, 0)">Scroll a la derecha</button>
<button onclick="scrollWin(-100, 0)">Scroll a la izquierda</button>
<script>
function scrollWin(x, y) {
  window.scrollBy(x, y);
}
</script>

Intente hacerlo usted mismo

Sintaxis

window.scrollBy(x, y)

o:

scrollBy(x, y)

Parámetro

Parámetro Descripción
x

Requerido. Número de píxeles a desplazar (horizontalmente).

El valor positivo se desliza hacia la derecha, el valor negativo se desliza hacia la izquierda.
y

Obligatorio. Número de píxeles a desplazarse (verticalmente).

Valor positivo para desplazarse hacia abajo, valor negativo para desplazarse hacia arriba.

Valor devuelto

Ninguno.

Compatibilidad del navegador

Todos los navegadores lo admiten scrollBy():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte Soporte