Javascript scroll • beim Scrollen einer Webseite oder eines Elements

Das scroll-Event feuert, wenn das Dokument oder ein Element gescrollt wird, z.B. um zusätzliche Elemente einzusetzen oder Animationen einzuleiten. onScroll ist die Basis für viele Javascript-Effekte: vom Laden von Dateien bis zum Parallax-Effekt.

Javascript onscroll – Aktionen beim Scrollen

Scroll-Event für Seiten

Beim scroll Inhalt nachgeladen – dass kannten wir schon bevor loading="lazy" als HTML-Attribut einzog. Bei der Bildersuche mit Flickr, bei Pinterest, Vimeo und Facebook sorgte das Nachladen von Elementen für ein schnelles Laden einer Webseite oder einer App. Sobald der Benutzer scrollte, sorgte Javascript für den Nachschub. Dann kann der Benutzer auf der Seite bleiben und behält den kompletten Inhalt der Seite, wenn er die Seite wieder nach oben scrollt.

Bei Animationen sorgt das Abfragen des scroll-Events dafür, dass Effekte erst anlaufen, wenn der Benutzer bis zur fragliche Stelle gescrollt hat, denn ansonsten wäre die Animation u.U. abgelaufen, bevor der Besucher die Animation im Blickfeld des Browsers hat. Dafür haben wir heute den IntersectionObserver, der ohne den Dauerbeschuss des scroll-Events effizienter feststellt, ob ein Element in den ViewPort des Browsers kommt.

Ein Scroll-Event tritt ein, wenn die Seite bzw. das Dokument im Browserfenster gescrollt wird, aber auch für Elemente wie iframe oder object – für alle Elemente der Seite, die eine Scrollleiste haben können.

scrolling
onscoll beim Scrollen der Seite

Langsam nach oben beim scroll-Event

Hier entdeckt das Script das scroll auf dem document-Element – wenn das Dokument im Browserfenster gescrollt wird. Sobald der Besucher die Seite zum ersten Mal scrollt, wird eine Grafik (Pfeil am rechten Rand) eingeblendet, die einen sofortigen Sprung zum Anfang des Dokuments bietet.

Inhalt von .slowup ist der weiße Pfeil im dunklen Feld rechts, der eingeblendet wird, sobald die Seite gescrollt wird. Der Pfeil bleibt beim Scrollen immer auf derselben Position im Browserfenster.

.slowup {
   position: fixed; 
   z-index: 2000; 
   width: 60px; height: 50px; 
   right: 0; bottom: 140px;
   transition: opacity 2s 0.5s
}

Die Transition auf opacity hat eine kurze Verzögerung (delay) und wird von Javascript ausgelöst.

document.querySelector('.slowup').setAttribute('style','opacity:0');

document.addEventListener ('scroll',function () {
  document.querySelector('.slowup').setAttribute('style','opacity:1');
});
const slowup = document.querySelector(".sscroll") !== null;

if (slowup) {
	document.querySelector(".sscroll").addEventListener ("click", function () {
		window.scrollTo({top: 0, behavior: 'smooth'});
	});
}

CSS behavior:smooth verlagert die aufwändigen Smooth Scroll-Skripte ins CSS, wurde aber von IE noch nicht unterstützt. Für das letzte aufrechte Fähnchen der Smooth Scroll-Verweigerer gibt es ein kleines Polyfill auf github.com.

onscroll für Elemente

onscroll kann auf die meisten HTML-Elemente angewendet werden: div, h, p, textarea und mehr. Damit das Element Scrollleisten (Scrollbars) bekommt, muss seine Höhe eingeschänkt werden und der überfließende Teil durch CSS overflow:hidden verborgen werden.

Allerdings werden die Browser immer zurückhaltender bei den Rollbalken: Häufig muss der Benutzer in den Tiefen der Einstellungen seines Geräts die automatische Anzeige von Scrollleisten aktivieren.

Schema übergroßes Element scrollen
Scrollleisten eines übergroßen Elements

scrollTop gibt an, um wie weit ein Element vom Anfang des Dokuments gescrollt wurde.

scoll-pic1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut at ipsum. Fusce in sem. Nulla facilisi. Sed augue. Pellentesque quam. Aenean felis turpis, vulputate non, tristique at, commodo vel, turpis.

scoll-pic2 Vivamus vel nibh. Vivamus pede neque, congue et, imperdiet in, adipiscing elementum, massa. Curabitur sem metus, hendrerit quis, pulvinar sit amet, viverra id, odio.

scoll-pic3 Quisque quis quam. Phasellus arcu. In molestie pretium leo. Sed semper eleifend velit. Sed tincidunt, nulla tincidunt condimentum ullamcorper, tortor magna scelerisque ante, vel luctus nisi mauris quis mi.

<script>
const box = document.getElementById('box');
box.onscroll = function () {
let showscroll = document.getElementById('showscroll');
   showscroll.innerHTML = "Box wird gescrollt " + this.scrollTop;
   
}
</script>

CSS bringt eine Reihe von Hilfestellungen für ein Scrollen, das dem Benutzer entgegen kommt:

Inhalt beim Scrollen laden

Für das verzögerte Laden von Bildern setzen wir heute loading="lazy" als HTML-Attribut ein. Für andere Inhalte – z.B. das Nachladen von Daten aus einer Anwendung auf dem Server als JSON oder Animationen – ist der Intersection Observer effizienter als die Beobachtung, wie weit das Dokument gescrollt wurde.

Attribute

target
Objekt zu dem das Ereignis ursprünglich gesendet wurde
eventPhase
Phase, in der das Ereignis bearbeitet wird: AT_TARGET, BUBBLING_PHASE, CAPTURING_PHASE
bubbles
true, wenn das Ereignis nach oben steigen kann
cancelable
Nein
timeStamp
Zeit in Millisekunden, zu der das Ereignis eingetreten ist
Suchen auf mediaevent.de