scroll-behavior smooth – animiertes weiches Scrollen statt Springen

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.

Animiertes Scrollen zu Bereichen der Seite (zu Ankerlinks)

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

⇪

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;
	}
}

Das ist heute Best Practice.

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.

overscroll-behavior

overscroll-behavior steuert das Verhalten, wenn ein Benutzer an das Ende eines scrollbaren Bereichs scrollt – also über das Maximum hinaus ("overscroll"). I.d.R. führt ein overscroll auf dem Handy zu einem Refresh der Seite.

.scroll {
	overflow-x: auto;
	white-space: pre;
	overscroll-behavior: contain;
}
			

overscroll Beispiele

overscroll-behavior steuert, was passiert, wenn man über den Rand eines scrollbaren Elements hinaus scrollt (also am Anfang oder Ende). Ohne overscroll-behavior vererbt sich das Scrollen »nach außen«, dann scrollt die Seite weiter.

Mit dem Wert overscroll-behavior: contain wird das Scrollen nicht an den Eltern-Container weiter gereicht, das Scrollen bleibt im Element »stecken«.

.scroll-container {
      height: 200px;
      max-width: 400px;
      margin: 2em auto;
      border: 2px solid #888;
      padding: 1em;
      overflow: auto;
      background: #efefef;
    }

.with-contain {
	overscroll-behavior: contain;
}