scroll-behavior smooth – Weiches Scrollen

CSS scroll-behavior weiches Scrollen

CSS scroll-behavior: smooth verleiht einem Block mit übergroßem Inhalt und overflow : scroll weiches Scrollen zu internen Ankerlinks.

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.

scroll-box 1 2 3 height: 200px; overflow-y: scroll; scroll-behavior: smooth;

Weiches Scrollen zu Ankerlinks ist nicht einfach nur ein kosmetischer Effekt. Während ein harter Sprung dem Benutzer die Übersicht über Größe und Aufbau der Seite nimmt, spiegelt weiches Scrollen die Struktur der Seite und die Position des Blocks 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.

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>

scroll-behavior wird von Chrome, Firefox und Opera unterstützt, aber nicht von IE, Edge und Safari. Das ist soweit kein Hindernis, scroll-behavior trotzdem einzusetzen: Browser, die CSS scroll behavior nicht unterstützen, führen den internen Link weiterhin als Sprung aus. Sobald diese Browser die Eigenschaften unterstützen, ziehen sie automatisch nach.

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.

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