Scroll-Snap-Align - CSS-Tricks

Anonim

scroll-snap-alignist Teil des CSS Scroll Snap-Moduls. Scroll-Snapping bezieht sich auf das „Sperren“ der Position des Ansichtsfensters für bestimmte Elemente auf der Seite, während das Fenster (oder ein scrollbarer Container) gescrollt wird. Stellen Sie sich einen Scroll-Snapping-Container vor, als würden Sie einen Magneten auf ein Element legen, das oben im Ansichtsfenster haftet und die Seite zwingt, genau dort nicht mehr zu scrollen.

scroll-snap-alignist eine erforderliche Eigenschaft für ein Scroll-Snapping-Element in einem Scroll-Snapping-Container. Weitere Informationen zu Scroll-Snapping-Containern finden Sie im scroll-snap-typeAlmanach-Eintrag. scroll-snap-alignteilt dem Browser , der Teil eines Elements , wenn ein Rasterpunkt angetroffen wird , ausgerichtet werden soll: Soll das Element fangen Sie den start, centeroder enddie , die enthält von der übergeordneten Container - scroll-snap-typeEigenschaft?

Wenn Sie möchten, dass ein Element am Anfang dieses Elements einrastet, geben Sie ihm den folgenden scroll-snap-alignWert:

/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-align: start; )

Syntax

scroll-snap-align: ( none | start | end | center )(1,2)

Sie können bis zu 2 Werte für diese Eigenschaft angeben, die die Block- bzw. Inline-Achse darstellen. Wenn Sie nur 1 Wert angeben, wird dieser Wert für beide Achsen verwendet.

Werte

scroll-snap-align akzeptiert die folgenden Werte:

  • none Deaktiviert das Scrollen am Element
  • start Richtet den Start des Elements am Snapport des Bildlaufcontainers aus, wenn er eingerastet ist
  • end Richtet das Ende des Elements beim Einrasten am Snapport des Bildlaufcontainers aus
  • center Richtet die Mitte des Elements beim Einrasten am Snapport des Bildlaufcontainers aus

Beispiel

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
69 68 11 * 79 11

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 11.0-11.2

verbunden

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-stop

Ressourcen

  • Empfehlung für CSS Scroll Snap W3C-Kandidaten
  • Praktisches CSS-Scroll-Snapping
  • Einführung in CSS Scroll Snap Points