scroll-behaviour smooth – Weiches Scrollen

Weiches Scrollen in einer scrollenden Box

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 innerhalb des Block stellt darüber hinaus weiches Scrollen ein.

Während der harte Sprung dem Benutzer die Übersicht nimmt, spiegelt weiches Scrollen die Struktur des Blocks deutlicher wieder.

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-behaviour 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 behaviour nicht unterstützen, führen den internen Link weiterhin als Sprung aus.

Der Block in diesem Beispiel ist ein iframe. 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.

SMOOTH SCROLL