Implémenter le défilement automatique en JavaScript
JavaScript garantit une meilleure expérience de l’interface utilisateur et dispose d’un large éventail de méthodes. Dans notre problème de réglage d’une page pour qu’elle défile automatiquement, nous allons vérifier certaines des fonctions qui peuvent se combiner et créer une interface utilisateur sympa.
La tâche de base ici est que nous ferons défiler notre page Web automatiquement à chaque chargement de page. De plus, la page sera arrêtée lorsque Enter est pressé pendant le défilement.
Et après avoir appuyé à nouveau sur Enter, la page commencera à défiler. Passons à la barrière de code et essayons de comprendre le flux de code.
Utilisez scrollBy() avec setInterval() pour faire défiler automatiquement en JavaScript
Dans la démonstration, nous aurons une interface utilisateur plus grande que la fenêtre d’affichage. La tâche principale est implémentée en JavaScript.
Nous avons initialisé 2 fonctions (startScroll et stopScroll). La fonction startScroll activera le défilement à chaque pression sur Enter.
Et le stopScroll() sera activé lorsque la pression Enter sera détectée.
La fonction startScroll possède les méthodes setInterval() et scrollBy(). Nous allons fusionner les deux méthodes.
Par la méthode scrollBy(), nous définirons le type de défilement que nous attendons. Notre code définira le défilement horizontal sur 0 et le défilement vertical sur 2 unités.
C’est une manière statique de faire défiler vers le bas, et vous ne verrez pas le défilement se produire. La page sautera et vous montrera après la partie défilée.
Nous allons donc définir l’intervalle de temps sur 10 millisecondes ; ainsi, la page descend visuellement. Dans la fonction stopScroll(), nous allons effacer les intervalles en vérifiant l’instance de l’emplacement de la page actuelle.
Nous ferons également une déclaration conditionnelle pour assurer la pause de lecture avec Enter. Vérifions le code.
<!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);
Production:
-with-setInterval()-to-Auto-Scroll.webp)
Comme on peut le voir, la page arrête de défiler lorsqu’elle atteint la fin de la page. Et lors du défilement manuel vers le haut à nouveau, cela rassure de jouer à nouveau le défilement.
Et ainsi, le comportement de défilement automatique peut être implémenté.
