El método window.scrollBy() se usa para desplazar el documento por un número determinado de píxeles.
Sintaxis:
window.scrollBy( xcoordinate, ycoordinate );
o
window.scrollBy(options);
Parámetros: este método acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:
- Coordenada x: es el valor de píxel horizontal que indica cuánto desea desplazar el documento (en términos de px).
- Coordenada y: es el valor de píxel vertical que indica cuánto desea desplazar el documento (en términos de px).
Nota: Puede encontrar estas opciones en opciones en el diccionario ScrollToOptions .
Ejemplo 1: Desplazarse horizontalmente
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM window scrollby() method
</title>
<style>
body {
width: 5000px;
}
a:focus {
background-color: magenta;
}
button {
position: fixed;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>HTML DOM Window.scrollBy() method</h2>
<button onclick="scrollby()">
Scroll horizontally!
</button>
<br><br>
<script>
function scrollby() {
window.scrollBy(100, 0);
}
</script>
</body>
</html>
Producción:
Ejemplo 2: Uso de opciones
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Window scrollBy() method
</title>
<style>
body {
width: 5000px;
height:5000px;
}
a:focus {
background-color: magenta;
}
button {
position: fixed;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>HTML DOM Window.scrollBy() method</h2>
<div>
<button onclick="scrollWin(0, 50)">
Scroll down
</button>
<br><br>
<button onclick="scrollWin(0, -50)">
Scroll up
</button>
<br><br>
<button onclick="scrollWin(50, 0)">
Scroll right
</button>
<br><br>
<button onclick="scrollWin(-50, 0)">
Scroll left
</button>
</div>
<script>
function scrollWin(x, y) {
window.scrollBy(x, y);
}
</script>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con el método HTML DOM Window scrollBy() se enumeran a continuación:
- Google cromo 45
- Firefox
- Ópera 32