scroll-behavior smooth – Weiches Scrollen

CSS scroll-behavior weiches Scrollen

scroll-behavior: smooth verleiht einem Block mit übergroßem Inhalt und overflow : scroll weiches Scrollen zu internen Ankerlinks. Damit empfindlichen Besuchern bei großen Entfernungen nicht schwindlig wird, bändigt prefers-reduced-motion den Fahrstuhl.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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

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.

iframe mit 3 Sprungbereichen
Aufbau eines iframes mit drei Sprungbereichen

Der Block in diesem Beispiel ist ein iframe mit einer Navigationsleiste oben und drei Bereichen für den Inhalt. Auch bei einer HTML-Box innerhalb einer Seite funktioniert scroll-behavior. Allerdings würde die Navigation der Ankerlinks das Sprungziel immer an den oberen Rand des Browserfensters setzen.

CSS
.smoothie {
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
.scroller {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
HTML
<div style="display:flex">
	<span><a href="#area-1">1</a></span>
	<span><a href="#area-2">2</a></span>
	<span><a href="#area-3">3</a></span>
</div>
<div class="smoothie">
	<div class="scroller" id="area-1">1</div>
	<div class="scroller" id="area-2">2</div>
	<div class="scroller" id="area-3">3</div>
</div>

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.