Scrollen mit CSS3 beeinflussen 07.04.2016, 10:03 Uhr

Scrolleffekte

Ob und wie bestimmte Bereiche scrollbar sind, lässt sich durch eine Reihe neuer CSS3-Eigenschaften steuern.
An sich sind Webseiten scrollbar: Wenn es auf einer Seite mehr Inhalt gibt, als direkt angezeigt werden kann, stellt der Browser Scrollmechanismen zur Verfügung. Beim Scrollen bewegen sich dann standardmäßig alle Inhalte mit.
Auf das Scrollverhalten können Sie nun mit CSS auf verschiedene Arten Einfluss nehmen. Wie genau, das zeigt Ihnen dieser Artikel. Behandelt werden dabei klassische Angaben wie background-attachment:fixed, overflow oder posi­tion: fixed, aber es geht auch um die neueren Ergänzungen, ­also background-attachment: local, position: sticky oder overflow-x und overflow-y. Zudem gehen wir auf ganz neue Konzepte wie die Eigenschaft scroll-behavior oder die Snap Points ein, über die Sie Einrastpunkte beim Scrollen festlegen können (Tabelle 1).

web & mobile DEVELOPER

Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt web&mobile Developer plus Kunde.
  • 2 Monate Gratis testen
  • Über 4.000 qualifizierte Fachartikel
  • Diverse DevBooks thematisch für Sie zusammen gestellt
  • Webcasts von 30 - 90 Min.
  • Aufzeichnungen von ausgewählten Fortbildungen und Konferenzen
  • Auf jedem Gerät verfügbar