CSS Scrollen

Scrollen ist eines der grundlegenden Interaktionselemente von Websites. CSS bietet viele Möglichkeiten, um zu bestimmen, wie Inhalte angezeigt werden, wenn sie die Größe des Bildschirms oder eines Kastens überschreiten. Darüber hinaus unterstützen moderne Browser sanftes Scrollen, was ein besseres Benutzererlebnis bietet.

Grundlegendes Scroll-Handling

Mit der Eigenschaft overflow können wir steuern, was passiert, wenn der Inhalt die Größe des Elternelements überschreitet. Zu den Werten gehören visible (Standard), hidden, scroll und auto. scroll stellt sicher, dass die Scrollleiste immer angezeigt wird, während auto sie nur bei Bedarf zeigt.

In diesem Beispiel erstellen wir einen Kasten mit fester Größe, der genügend Text enthält, um Scrollen zu erzwingen. Mit overflow: scroll ist die Scrollleiste immer sichtbar.

Sanftes Scrollen

Mit der Eigenschaft scroll-behavior können wir festlegen, dass das Scrollen sanft erfolgt, wenn der Benutzer auf einen Link klickt, der auf einen Abschnitt innerhalb der Seite verweist. Dies sorgt für ein angenehmeres Erlebnis, insbesondere auf längeren Seiten.

In diesem Beispiel platzieren wir einen Link, der zu einem späteren Teil der Seite führt. Mit scroll-behavior: smooth scrollt der Browser langsam und fließend zum Zielelement.

Tipps zum Scrollen

Die Anpassung des Scrollens kann helfen, ein besseres Benutzererlebnis zu schaffen, aber man sollte stets auf Zugänglichkeit und Leistung achten.

• Verwende overflow: auto, damit die Scrollleiste nur bei Bedarf erscheint.
• Sanftes Scrollen verbessert das Erlebnis, aber denke daran, auch die Benutzereinstellungen zu respektieren (z. B. prefers-reduced-motion).
• Vermeide übermäßig individuelle Scroll-Lösungen, da sie die Leistung und Benutzerfreundlichkeit beeinträchtigen können.