Scroll-Snap-Stop - CSS-Tricks

Anonim

scroll-snap-stopist 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-stopist eine optionale 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-stopMit dieser Option können Sie den Scroll-Snapping-Container zwingen, an einem bestimmten Element zu fangen. Angenommen, Sie haben in einem Scroll-Snap-Container gescrollt und ihm einen riesigen Dreh des Mausrads gegeben. Normalerweise lässt der Browser die Geschwindigkeit Ihres Bildlaufs an Fangpunkten vorbeifliegen, bis sie sich an einem Fangpunkt nahe der Stelle festsetzt, an der der Bildlauf normalerweise endet. Durch Festlegen scroll-snap-stopkönnen Sie dem Browser mitteilen, dass er für ein bestimmtes Element anhalten muss, bevor der Benutzer daran vorbeikommt.

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

Syntax

scroll-snap-stop: normal | always;

Werte

scroll-snap-stop akzeptiert die folgenden Werte:

  • normal ist der Standardwert und ermöglicht das Vorbeirollen eines Elements ohne Einrasten
  • always zwingt den Browser, an diesem Element zu fangen, selbst wenn der Bildlauf normalerweise über dieses Element hinausgeht

Beispiel

Siehe das Pen Scroll-Snap-Stop-Beispiel
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

Beachten Sie, dass Chrome scroll-snap-stop: always;derzeit möglicherweise keine Unterstützung bietet.

verbunden

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-align

Ressourcen

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