scroll-behavior smooth – Weiches Scrollen

scroll-behavior

Der unmittelbare Sprung innerhalb einer Seite ist reines HTML ohne Zusätze und stammt noch aus den Urzeiten des Webs. Erst CSS scroll-behavior:smooth gleitet sanft wie ein Fahrstuhl zum Ziel.

html {
	scroll-behavior: smooth;
}
	…	…	…
<a href="#scrolling">Scoll Abwärts!</a>
	…	…	…
<div id="scrolling"></div>

Weiches Scrollen zu Ankerlinks ist nicht einfach ein kosmetischer Effekt. Während ein harter Sprung dem Benutzer die Übersicht über Größe und Aufbau der Seite raubt, offenbart weiches Scrollen die Struktur der Seite. Das spiegelt die Position der Inhalte deutlicher wieder.

Darum wird das weiche Scrollen schon seit ewig und drei Jahren mit Hilfe von Javascript oder jQuery eingesetzt. CSS anstelle von Scripts und Libraries ist einfacher, zudem ist scroll-behavior rückwärts-kompatibel: Browser, die smooth nicht unterstützen, springen ohne weichen Übergang.

scroll-behavior kennt nur zwei Werte: smooth und auto. auto führt das Verhalten beim Scrollen zurück auf den harten Sprung.

prefers-reduced-motion

Bei großen Entfernungen zum Sprungziel kann einigen Besuchern von der Animation schwindlig werden. Dagegen kann die CSS Media Query prefers-reduced-motion abgefragt werden.

.smooth-scroll-area {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	.smooth-scroll-area {
		scroll-behavior: auto;
	}
}

Weiches Scrollen zu Bereichen der Seite

Das klassische Beispiel für das weiche Scrollen ist das Pfeilsymbol (auf diesen Seiten ein Maus-Icon im Seitenfuß), mit der der Benutzer wieder an den Anfang der Seite scrollt. Die CSS-Eigenschaft für das weiche Scrollen ist einfach wie oben angegeben

html {
	scroll-behavior: smooth;
}

Die Sprungadresse ist href="#top-menu" – ein Element am Anfang der Seite.

<a href="#top-menu">
  <img src="scrollup.svg" width="70px" height="70px" alt="…">
</a>

Um mehrere Ziele innerhalb einer Seite mit scroll-behavior: smooth anzusteuern, nutzt hier jeder Bereich das HTML-Attribut data-title. data-title="Liste" ist die Adresse für den Sprung zurück zur Liste der Ziele.

<section data-title="Liste">
	<div class="scrollto section1">▶ Gehe zu Section 1</div>
	<div class="scrollto section2">▶ Gehe zu Section 2</div>
	<div class="scrollto section3">▶ Gehe zu Section 3</div>
</section>

<section data-title="section1">
	…
	<p class="scrollback">⇪</p>
</section>

<section data-title="section2">
	…
	<p class="scrollback">⇪</p>
</section>

…

Ein paar Zeilen JavaScript regeln die Sprünge zu den Zielen und behandeln den Rücksprung zur Liste.

<script>
const scrollto = document.querySelectorAll(".scrollto");
for (const item of scrollto) {
	item.onclick = function () {
		var target = this.className;
		target = target.replace("scrollto ","");
		document.querySelector("section[data-title='" + target + "']").
		      scrollIntoView({ behavior: 'smooth' });
	}
}

const scrollback = document.querySelectorAll(".scrollback");
for (const item of scrollback) {
	item.onclick = function () {
		document.querySelector("section[data-title='Liste']").
		      scrollIntoView({ behavior: 'smooth' });
	}
}
</script>	

Section 1

⇪

Section 2

⇪

Section 3

⇪

overflow und scroll-behavior

Wenn der Inhalt eines Blocks höher ist als seine von CSS festgelegte Höhe, legt overflow seit CSS 2.1 die Darstellung des Überschuss fest: hidden, scroll oder auto. scroll-behavior: smooth bei Ankerlinks zu Sprungzielen innerhalb des Blocks setzt darüber hinaus weiches Scrollen ein.

Ein Beispiel für einen iframe mit weich scrollenden Bereichen ist hier.

Eine weitere Eigenschaft kümmert sich um das Scrollen: CSS scroll-snap setzt Einrastpunkte in einen Block, der mehrere Elemente per Scrollen vorführt.

Browser-Support für scroll-behavior

scroll-behavior wird von allen modernen Browsern unterstützt, aber nicht von IE (klar …). Dem Einsatz steht nichts entgegen, denn selbst wenn ein alter Browser auf scroll-behavior stößt: Browser, die CSS scroll-behavior nicht unterstützen, führen den internen Link weiterhin als Sprung aus.