Quelle: Foto: GagoDesign  / Shutterstock
Scrollverhalten mit CSS steuern 17.03.2022, 08:30 Uhr

Scrollverhalten

Das Scrollverhalten im Browser lässt sich inzwischen gut über CSS steuern.
Wenn es mehr Inhalte gibt, als im Viewport Platz haben, blendet der Browser automatisch Scrollleisten ein, über die die nicht direkt sichtbaren Inhalte erreicht werden können. Vertikale Scrollleisten sind im Allgemeinen erwünscht, horizontale gilt es eher zu vermeiden. Browser machen das aber in vielen Fällen automatisch: mehrere Inhalte werden in Sprachen mit der Schreibrichtung links nach rechts einfach untereinander dargestellt, wenn sie nicht nebeneinander passen.
In manchen Fällen ist das horizontale Scrollen aber ausdrücklich erwünscht, sofern das Scrollen nicht die Webseite als Ganzes, sondern nur einen einzelnen Bereich davon betrifft: so genannte Medienslider setzen auf das horizontale Scrollen eines mit Bildern oder Ähnlichem gefüllten Bereichs. Diese wiederum sieht man sehr häufig bei der Präsentation von Filmen. Die Filme werden in verschiedenen Kategorien präsentiert und innerhalb einer Kategorie kann man horizontal scrollen, da nicht alle Filme direkt im Viewport Platz haben. Im Artikel sehen Sie, wie Sie solche Komponenten erzeugen und welche CSS-Eigenschaften dabei eine Rolle spielen.
Unterschiedliche Werte für overflow von links nach rechts: visible, hidden und scroll (Bild 1)
Quelle: Maurice

Jetzt 1 Monat kostenlos testen!

Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt dotnetpro-plus-Kunde.
  • + Digitales Kundenkonto,
  • + Zugriff auf das digitale Heft,
  • + Zugang zum digitalen Heftarchiv,
  • + Auf Wunsch: Weekly Newsletter,
  • + Sämtliche Codebeispiele im digitalen Heftarchiv verfügbar