Scroll-Snap-Typ - CSS-Tricks

Anonim

Die scroll-snap-typeEigenschaft ist 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 vor, Sie setzen einen Magneten auf ein Element, das oben im Ansichtsfenster haftet und die Seite zwingt, genau dort nicht mehr zu scrollen.

Dies ist nützlich, wenn Sie den Browser an bestimmten Stellen auf der Seite anhalten möchten. Beispiel: Ein Benutzer, der eine Fotogalerie durchsucht, möchte wahrscheinlich nicht auf halber Strecke an einem Bild vorbei scrollen. Wahrscheinlich möchte er, dass das Bild beim Scrollen an der richtigen Position „einrastet“. Scroll-Snapping bietet Entwicklern eine reine CSS-Methode, um mit diesem Verhalten umzugehen.

scroll-snap-typeist eine erforderliche Eigenschaft für jeden scrollbaren Container, zu dem Sie einen Bildlauf hinzufügen möchten. Es beantwortet drei Fragen für einen Bildlaufcontainer:

  1. Verwendet der Container Scroll-Snapping?
  2. Auf welcher Achse - x (horizontal), y (vertikal), Block oder Inline - sollte Scroll-Snapping angewendet werden?
  3. Wie soll sich das Scrollen beim Scrollen verhalten? Wird es 100% der Zeit erzwungen oder wird es nur wirksam, wenn der Benutzer einer Fangposition „nahe genug“ kommt? Dazu später mehr.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Syntax

scroll-snap-type: none | ( x | y | block | inline | both ) ( mandatory | proximity )

Werte

scroll-snap-type akzeptiert die folgenden Werte:

  • none Deaktiviert das Scrollen.
  • x Aktiviert das Scrollen nur entlang der x-Achse.
  • y Aktiviert das Scrollen nur entlang der y-Achse.
  • block Aktiviert das Scrollen nur entlang der Blockachse.
  • inline Aktiviert das Scroll-Snapping nur entlang der Inline-Achse.
  • bothAktiviert das Scrollen am Bildlauf entlang beider Achsen (die Sie sich als xund y, oder inlineund vorstellen können block.
  • mandatory ist ein Strenge-Wert, der den Browser anweist, immer zu einer Fangposition zu wechseln, wenn kein Bildlauf stattfindet.
  • proximityist ein Strenge-Wert, der den Browser anweist, zu einer Fangposition zu wechseln, wenn eine Bildlaufaktion einer Fangposition ziemlich nahe kommt. Wenn es nicht ganz nah ist, sollte der Browser nicht einrasten und das Scrollen verhält sich normal.

Beispiel

Siehe das Beispiel
für einen Scroll-Snap-Typ mit Stift von CSS-Tricks (@ css-Tricks) auf CodePen.

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-padding
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Ressourcen

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