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.
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.
scrollTop gibt an, um wie weit ein Element vom Anfang des Dokuments gescrollt wurde.
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.
Vivamus vel nibh. Vivamus pede neque, congue et, imperdiet in, adipiscing elementum, massa. Curabitur sem metus, hendrerit quis, pulvinar sit amet, viverra id, odio.
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