Implementieren Auto Scroll in JavaScript
JavaScript sorgt für ein besseres UI-Erlebnis und verfügt über eine breite Palette von Methoden. In unserem Problem, eine Seite so einzustellen, dass sie automatisch scrollt, werden wir einige der Funktionen überprüfen, die sich kombinieren und eine coole Benutzeroberfläche erstellen lassen.
Die grundlegende Aufgabe hier ist, dass wir unsere Webseite bei jedem Laden der Seite automatisch scrollen. Außerdem wird die Seite angehalten, wenn beim Scrollen Enter gedrückt wird.
Und nachdem Sie erneut Enter gedrückt haben, beginnt die Seite zu scrollen. Lassen Sie uns zum Codezaun springen und versuchen, den Codefluss zu verstehen.
Verwenden Sie scrollBy() mit setInterval() zum automatischen Scrollen in JavaScript
In der Demonstration haben wir eine größere Benutzeroberfläche als das Ansichtsfenster. Die Hauptaufgabe ist in JavaScript implementiert.
Wir haben 2 Funktionen initialisiert (startScroll und stopScroll). Die Funktion startScroll() aktiviert das Scrollen jedes Mal, wenn Enter gedrückt wird.
Und stopScroll() wird aktiviert, wenn das Drücken von Enter erkannt wird.
Die Funktion startScroll hat die Methoden setInterval() und scrollBy(). Wir werden beide Methoden zusammenführen.
Mit der Methode scrollBy() legen wir fest, welche Art von Scroll wir erwarten. Unser Code setzt das horizontale Scrollen auf 0 und das vertikale Scrollen auf 2 Einheiten.
Es ist eine statische Art, nach unten zu scrollen, und Sie werden nicht sehen, wie das Scrollen passiert. Die Seite springt und zeigt Sie nach dem gescrollten Teil an.
Also setzen wir das Zeitintervall auf 10 Millisekunden; somit geht die Seite visuell nach unten. In der Funktion stopScroll() löschen wir die Intervalle, indem wir die Instanz der aktuellen Seitenposition prüfen.
Wir werden auch eine bedingte Anweisung machen, um sicherzustellen, dass die Wiedergabe mit Enter angehalten wird. Lassen Sie uns den Code überprüfen.
<!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);
Ausgabe:
-with-setInterval()-to-Auto-Scroll.webp)
Wie zu sehen ist, stoppt die Seite das Scrollen, wenn sie das Ende der Seite erreicht. Und wenn manuell wieder nach oben gescrollt wird, beruhigt es, den Scroller erneut zu spielen.
Und damit kann das Auto-Scroll-Verhalten implementiert werden.
