Implementar desplazamiento automático en JavaScript
JavaScript garantiza una mejor experiencia de interfaz de usuario y tiene una amplia gama de métodos. En nuestro problema de configurar una página para que se desplace automáticamente, revisaremos algunas de las funciones que se pueden combinar y crear una interfaz de usuario genial.
La tarea básica aquí es que desplazaremos nuestra página web automáticamente en cada carga de página. Además, la página se detendrá cuando se presione Enter mientras se desplaza.
Y después de presionar Enter nuevamente, la página comenzará a desplazarse. Saltemos a la cerca del código e intentemos comprender el flujo del código.
Utilice scrollBy() con setInterval() para desplazarse automáticamente en JavaScript
En la demostración, tendremos una interfaz de usuario más grande que la ventana gráfica. La tarea principal se implementa en JavaScript.
Hemos inicializado 2 funciones (startScroll y stopScroll). La función startScroll() habilitará el desplazamiento cada vez que se presione Enter.
Y stopScroll() se habilitará cuando se detecte la pulsación Enter.
La función startScroll tiene el método setInterval() y scrollBy(). Combinaremos ambos métodos.
Mediante el método scrollBy(), estableceremos qué tipo de desplazamiento esperamos. Nuestro código establecerá el scroll horizontal en 0 y el scroll vertical en 2 unidades.
Es una forma estática de desplazarse hacia abajo y no podrá ver cómo se desplaza. La página saltará y le mostrará después de la parte desplazada.
Entonces, estableceremos el intervalo de tiempo en 10 milisegundos; por lo tanto, la página baja visualmente. En la función stopScroll(), borraremos los intervalos comprobando la instancia de la ubicación de la página actual.
También haremos una declaración condicional para garantizar que la reproducción se detenga con Enter. Comprobemos el código.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="one" style="height: 250px; background:pink">
<br>
  On page load the scrolling of the page will be enabled. <br>
  When pressed enter, the scroll will be halt. <br>
  And when pressed again it will scroll. <br>
  When the scroll meets the end of page, the scrolling function will stop. <br>
  And you can manually scroll up. An when needed press enter again to scroll to down. <br>
</div>
<div id="one" style="height: 250px; background:purple"></div>
<div id="one" style="height: 250px; background:cyan"></div>
<div id="one" style="height: 250px; background:lightgreen"></div>
</body>
</html>
let scrollerID;
let paused = true;
let interval = 10;
function startScroll() {
let id = setInterval(function() {
window.scrollBy(0, 2);
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// end of page?
stopScroll();
}
}, interval);
return id;
}
function stopScroll() {
clearInterval(scrollerID);
}
document.body.addEventListener('keypress', function(event) {
if (event.which == 13 || event.keyCode == 13) {
// 'Enter' key
if (paused == true) {
scrollerID = startScroll();
paused = false;
} else {
stopScroll();
paused = true;
}
}
}, true);
Producción:
-with-setInterval()-to-Auto-Scroll.webp)
Como se puede ver, la página deja de desplazarse cuando llega al final de la página. Y cuando se desplaza manualmente a la parte superior de nuevo, tranquiliza volver a jugar el desplazador.
Y así, se puede implementar el comportamiento de desplazamiento automático.
