CSS, HTML & Javascript mit {stil}

Javascript scroll • beim Scrollen der Seite oder eines Elements

Das scroll-Event feuert, wenn das Dokument oder ein Element gescrollt wird, z.B. um einen Back to Top-Button einzusetzen, den Header kompakt zu machen. scroll ist die Basis für viele Javascript-Effekte: von der Scroll-basierten Fortschritts-Anzeige bis zum Parallax-Effekt.

Javascript onscroll – Aktionen beim Scrollen

Scroll-Event für Seiten

Scroll war lange Zeit für eine Vielzahl von Effekten überbenutzt. Heute wird das scroll-Event viel gezielter eingesetzt.

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

Beim Scrollen den Header verkleinern

Genau dafür ist das scroll-Event auch heute noch absolut geeignet, und zwar global auf dem Dokument / Window, weil ein Zustand der Benutzeroberfläche (UI) geändert wird (Header klein/groß).

.site-header {
  height: 120px;
  transition: height 0.2s ease;
}

.site-header.is-small {
  height: 70px;
}

window.addEventListener('scroll', onScroll, { passive: true });

Das Event gehört nicht dem document, nicht einem einzelnen Container, sondern dem window, wenn es um die ganze Seite geht. 

{ passive: true }

ist wichtig, denn das sagt dem Browser: "Blockiere den Scroll nicht" und verhindert Performance-Warnungen. Bei Scroll-Listenern ist das die beste Praxis.

window.addEventListener('scroll', () => {
	topMenu.classList.toggle('is-small', window.scrollY > 80);
	logo.classList.toggle("shrink")
}, { passive: true });

Das Verkleinern des Headers beim Scrollen der Seite ist ein Paradebeispiel,

  • wenn es nur zwei Zustände gibt (groß / klein),
  • die Schwelle fix ist
  • wenn keine Animation pro Pixel gebraucht wird

Dann ist ein Scroll-Listener technisch überdimensioniert. Heute kann das Scroll-Event zum Verkleinern des Headers gut durch den Intersection Observer ersetzt werden.

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. 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