Scroll-snap-stop | CSS-Tricks

scroll-snap-stop ist Teil des CSS Scroll Snap Module. Scroll Snapping bezieht sich auf das „Sperren“ der Position des Viewports an bestimmten Elementen auf der Seite, während das Fenster (oder ein scrollbarer Container) gescrollt wird. Stellen Sie sich einen Scroll-Snapping-Container wie einen Magneten vor, der oben auf einem Element angebracht ist und am oberen Rand des Viewports haftet und den Seitenumbruch erzwingt, um genau dort anzuhalten.

scroll-snap-stop ist eine optionale Eigenschaft für ein Scroll-Snapping-Element innerhalb eines Scroll-Snapping-Containers. Weitere Informationen zu Scroll-Snapping-Containern finden Sie im Almanac-Eintrag zu scroll-snap-type.

scroll-snap-stop ermöglicht es Ihnen, den Scroll-Snapping-Container zu zwingen, an einem bestimmten Element zu stoppen. Angenommen, Sie scrollen innerhalb eines Scroll-Snapping-Containers und geben ihm eine massive Drehung mit dem Mausrad. Normalerweise würde der Browser die Geschwindigkeit Ihres Scrollens über die Snap-Punkte hinauslaufen lassen, bis er sich auf einem Snap-Punkt in der Nähe des Punktes einpendelt, an dem das Scrollen normalerweise enden würde. Durch das Setzen von scroll-snap-stop können Sie dem Browser mitteilen, dass er unbedingt an einem bestimmten Element anhalten muss, bevor er den Benutzer weiterlässt.

/* 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 erlaubt, dass ein Element ohne Snap-Vorgang überrollt wird
always zwingt den Browser dazu, an diesem Element zu stoppen, selbst wenn das Scrollen normalerweise über dieses Element hinausgehen würde

Beispiel

Siehe den Pen scroll-snap-stop example
von CSS-Tricks (@css-tricks) auf CodePen.

Browser-Unterstützung

Diese Daten zur Browserunterstützung stammen von Caniuse, das weitere Details enthält. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrome	Firefox	IE	Edge	Safari
69	68	11*	79	11

Mobil / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
127	127	127	11.0-11.2

Beachten Sie, dass Chrome scroll-snap-stop: always; derzeit möglicherweise nicht unterstützt.