CSS Scroll-Properties

Scroll-Properties steuern, wie der Browser zu einem Ziel scrollt, wo Inhalte einrasten und welcher Abstand beim Scrollen berücksichtigt wird. Sie funktionieren auf der ganzen Seite oder innerhalb eines eigenen Scroll-Containers.

Ein eigener Scroll-Container entsteht zum Beispiel mit einer begrenzten Grösse und overflow: auto. Für die ganze Seite ist keine zusätzliche overflow-Angabe nötig: Sobald der Inhalt höher als das Browserfenster ist, kann die Seite gescrollt werden.

Properties im Überblick

  • scroll-behaviorbestimmt, ob der Browser direkt oder weich zu einem Ziel scrollt
  • scroll-snap-typeaktiviert Scroll Snap und legt Achse sowie Stärke fest
  • scroll-snap-alignbestimmt die Ausrichtung eines Elements beim Einrasten
  • scroll-snap-stopbestimmt, ob Snap-Punkte übersprungen werden dürfen
  • scroll-paddingdefiniert Abstand innerhalb des Scroll-Containers
  • scroll-margindefiniert Abstand um ein Zielelement

1. scroll-behavior

scroll-behavior wirkt beim Navigieren zu Ankerlinks und bei programmatisch ausgelöstem Scrollen. Das normale Scrollen mit Mausrad oder Trackpad wird dadurch nicht verändert.

  • auto – Der Browser springt direkt zum Ziel. Das ist der Standard.
  • smooth – Der Browser scrollt weich zum Ziel.
html {
    scroll-behavior: smooth;
}

Auf html gilt die Eigenschaft für die ganze Seite. Auf einem scrollbaren Element gilt sie nur für diesen Scroll-Container.

See the Pen Sanftes Scrollen mit scroll-behavior by Intensivstation (@intensivstation) on CodePen.

Accessibility: Weiche Scrollbewegungen können für bewegungsempfindliche Nutzer:innen unangenehm sein. Aktiviere sie deshalb nur, wenn keine Präferenz für reduzierte Bewegung eingestellt ist.

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

2. scroll-snap-type

scroll-snap-type wird auf den Scroll-Container gesetzt. Die Angabe kombiniert eine Achse mit der Stärke des Einrastens.

.carousel {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

Achse

  • x – Einrasten auf der horizontalen Achse
  • y – Einrasten auf der vertikalen Achse
  • inline – Einrasten auf der Inline-Achse
  • block – Einrasten auf der Block-Achse
  • both – Einrasten auf beiden Achsen

Stärke

  • none – Scroll Snap ist deaktiviert. Das ist der Standard.
  • proximity – Der Browser rastet ein, wenn das Ende der Scrollbewegung nahe an einem Snap-Punkt liegt.
  • mandatory – Der Browser muss nach dem Scrollen an einem Snap-Punkt einrasten.

Hinweis: mandatory kann bei sehr grossen oder unterschiedlich langen Inhalten problematisch sein, weil Zwischenbereiche schwer erreichbar werden können.

3. scroll-snap-align

scroll-snap-align wird auf die Elemente innerhalb des Snap-Containers gesetzt. Die Eigenschaft bestimmt, welche Kante oder Position beim Einrasten am Scroll-Container ausgerichtet wird.

  • none – Das Element definiert keinen Snap-Punkt. Das ist der Standard.
  • start – Der Anfang des Elements wird ausgerichtet.
  • center – Die Mitte des Elements wird ausgerichtet.
  • end – Das Ende des Elements wird ausgerichtet.
.carousel-item {
    scroll-snap-align: center;
}

Mit zwei Werten lassen sich Block- und Inline-Achse getrennt festlegen, zum Beispiel scroll-snap-align: start center.

Horizontales Karussell

Das Beispiel kombiniert scroll-snap-type auf dem Container mit scroll-snap-align auf den einzelnen Items.

Der Container scrollt horizontal und rastet nach jeder Bewegung an der Mitte eines Elements ein.

See the Pen Scroll-Snap: Horizontales Karussell by Intensivstation (@intensivstation) on CodePen. 

.carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 15px;
}

.carousel-item {
    flex: 0 0 220px;
    scroll-snap-align: center;
}

4. scroll-snap-stop

scroll-snap-stop wird auf ein Snap-Element gesetzt. Es bestimmt, ob eine schnelle Scrollbewegung diesen Snap-Punkt überspringen darf.

  • normal – Snap-Punkte dürfen übersprungen werden. Das ist der Standard.
  • always – Die Scrollbewegung soll an diesem Snap-Punkt stoppen.
.carousel-item {
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

5. scroll-padding

scroll-padding wird auf den Scroll-Container gesetzt. Es verkleinert nicht das Layout, sondern definiert den Bereich, in dem ein Ziel nach dem Scrollen sichtbar liegen soll. Das ist besonders nützlich, wenn eine fixierte Navigation einen Teil des Viewports überdeckt.

  • auto – Der Browser bestimmt den Abstand. Der verwendete Wert ist normalerweise 0.
  • Längen wie 5rem oder 80px
  • Prozentwerte wie 10%
  • Ein bis vier Werte funktionieren wie bei padding.
html {
    scroll-padding-top: 5rem;
}

6. scroll-margin

scroll-margin wird auf das Zielelement gesetzt. Der zusätzliche Abstand wird beim Scrollen zu diesem Element berücksichtigt, verändert aber nicht den sichtbaren Abstand im normalen Layout.

  • Längen wie 5rem oder 80px
  • Ein bis vier Werte funktionieren wie bei margin.
  • Prozentwerte und auto sind nicht erlaubt.
section {
    scroll-margin-top: 5rem;
}

Fixierte Navigation

Ohne scroll-margin-top kann eine fixierte Navigation die Überschrift des angesprungenen Abschnitts verdecken. Der Scroll-Abstand schafft oberhalb des Zielelements Platz.

See the Pen scroll-margin-top: Fixierte Navigation by Intensivstation (@intensivstation) on CodePen.

Vollbild-Section-Snapping

Beim normalen Scrollen mit Mausrad oder Trackpad rastet jede Section am oberen Rand ein. Der Container definiert die vertikale Achse und die Stärke, die Sections definieren ihre Ausrichtung.

See the Pen Vollbild-Section-Snapping by Intensivstation (@intensivstation) on CodePen. 

.snap-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

.snap-section {
    height: 100vh;
    scroll-snap-align: start;
}

Kurz gesagt

  • scroll-behavior steuert direktes oder weiches Scrollen zu einem Ziel.
  • scroll-snap-type gehört auf den Scroll-Container.
  • scroll-snap-align und scroll-snap-stop gehören auf die Snap-Elemente.
  • scroll-padding definiert Abstand innerhalb des Scroll-Containers.
  • scroll-margin definiert Abstand um ein Zielelement.
  • Scroll-Properties können für die ganze Seite oder für einen eigenen Scroll-Container verwendet werden.

Nurse Mehr zu eigenen Scroll-Containern findest du unter CSS Overflow.