Gesteuertes Scrollen mit CSS Scroll Snap

Sorgen Sie für ein kontrolliertes Scrollen durch das Deklarieren von Scroll-Andockpositionen.

Robert Flack

Majid Valipour

Mit der Funktion CSS-Scroll-Snap können Webentwickler ein kontrolliertes Scrollen gestalten, indem sie Scroll-Andocken angeben. Seiten mit Artikeln und Bilderkarussells sind zwei gängige Beispiele dafür. CSS Scroll Snap bietet eine nutzerfreundliche und konsistente API zum Erstellen dieser beliebten UX-Muster.

Hintergrund

Vorteile des Scroll-Snaps

Scrollen ist eine beliebte und natürliche Art, mit Inhalten im Web zu interagieren. Sie ist das native Mittel der Plattform, um Zugriff auf mehr Informationen zu bieten, als gleichzeitig auf dem Bildschirm zu sehen ist. Dies ist auf mobilen Plattformen mit begrenztem Platz auf dem Bildschirm besonders wichtig. Daher überrascht es nicht, dass Webautoren Inhalte zunehmend lieber in scrollbaren, flachen Listen als in tiefen Hierarchien organisieren.

Der größte Nachteil des Scrollens ist die mangelnde Präzision. Selten ist ein Scrollen am Ende auf einen Absatz oder Satz ausgerichtet. Dies gilt noch stärker für paginierte oder aufgegliederte Inhalte mit sinnvollen Grenzen, wenn das Scrollen in der Mitte der Seite oder des Bildes endet und sie nur teilweise sichtbar ist. Diese Anwendungsfälle profitieren von einem gut kontrollierten Scrollen.

Webentwickler haben lange Zeit auf JavaScript-basierte Lösungen zur Steuerung des Scrollens zurückgegriffen, um dieses Problem zu beheben. JavaScript-basierte Lösungen bieten jedoch keine Lösung mit voller Wiedergabetreue, da es keine Primitives zur Scrollanpassung oder keinen Zugriff auf zusammengesetztes Scrollen gibt. CSS Scroll Snap sorgt für eine schnelle, fehlerfreie und nutzerfreundliche Lösung, die in allen Browsern einheitlich funktioniert.

Mit CSS Scroll Snap können Webentwickler jeden Scrollcontainer mit Grenzen für Scrollvorgänge markieren, an denen sie beendet werden sollen. Browser wählen dann je nach Details des Scrollvorgangs, Layout und Sichtbarkeit des Scrollcontainers sowie Details der Snap-Positionen die am besten geeignete Endposition aus und animieren dann reibungslos dorthin. Wenn der Nutzer zu unserem früheren Beispiel zurückkehrt, rastet das sichtbare Bild ein, während der Nutzer im Karussell scrollt. Es sind keine Scrollanpassungen durch JavaScript erforderlich.

CSS-Scroll-Snap

Beim Scrollen-Andocken wird der Scroll-Offset eines Scrollcontainers an eine bevorzugte Andockposition angepasst, sobald der Scrollvorgang abgeschlossen ist.

Mit der Property scroll-snap-type kann für einen Scrollcontainer das Scroll-Snapping aktiviert werden. Dies bedeutet, dass der Browser diesen Scrollcontainer an den von seinen untergeordneten Elementen generierten Anlegepositionen anpeilen soll. scroll-snap-type bestimmt die Achse, auf der gescrollt wird, also x, y oder both, sowie die strikte Einstellung für das Andocken: mandatory, proximity. Mehr dazu später.

Eine Andockposition kann erzeugt werden, indem eine gewünschte Ausrichtung für ein Element deklariert wird. Diese Position ist der Scroll-Offset, an dem der Scroll-Container des nächsten Ancestors und das Element wie für die angegebene Achse ausgerichtet werden. An jeder Achse sind die folgenden Ausrichtungen möglich: start, end, center.

Eine start-Ausrichtung bedeutet, dass die Startkante des Scrollcontainer-Snapports mit der Startkante des Element-Fangbereich bündig sein muss. Bei den Ausrichtungen end und center bedeutet das, dass der Endrand oder die Mitte des Snap-Supports des Scrollcontainers mit dem Endrand oder der Mitte des Snap-Bereichs des Elements übereinstimmen sollte.

Die folgenden Beispiele veranschaulichen, wie diese Konzepte verwendet werden.

Beispiel: Horizontale Galerie

Ein häufiger Anwendungsfall für das Andocken von Rollen ist ein Bilderkarussell. Wenn Sie beispielsweise ein horizontales Bilderkarussell erstellen möchten, das beim Scrollen auf jedes Bild springt, können Sie für den Scrollcontainer ein obligatorisches scroll-snap-type auf der horizontalen Achse angeben. Legen Sie für jedes Bild scroll-snap-align: center fest, damit das Bild beim Anspringen im Karussell zentriert wird.

#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

<div id="gallery">
  <img src="cat.jpg">
  <img src="dog.jpg">
  <img src="another_cute_animal.jpg">
</div>

Da die Anlegepositionen mit einem Element verknüpft sind, kann der Anlegealgorithmus intelligent festlegen, wann und wie das Element an den Scrollcontainer angedockt wird. Angenommen, ein Bild ist größer als das Karussell. Ein naiver Snap-Algorithmus kann verhindern, dass der Nutzer das Bild schwenken kann, um es sich vollständig anzusehen. Gemäß der Spezifikation müssen Implementierungen diesen Fall jedoch erkennen und es dem Nutzer ermöglichen, frei innerhalb dieses Bildes zu scrollen und nur an den Rändern anzuspringen.

Beispiel: eine Produktseite im Kaufprozess

Ein weiterer häufiger Fall, der vom Scroll-Andocken profitieren kann, sind Seiten mit mehreren logischen Abschnitten, durch die vertikal gescrollt werden kann, z. B. eine typische Produktseite. scroll-snap-type: y proximity; eignet sich in solchen Fällen besser. Es stört nicht, wenn ein Nutzer in die Mitte eines bestimmten Bereichs scrollt, aber auch, wenn er sich dem neuen Bereich nähert, wird er darauf aufmerksam gemacht.

Dies kann folgendermaßen erreicht werden:

article {
  scroll-snap-type: y proximity;
  /* Reserve space for header plus some extra space for sneak peeking. */
  scroll-padding-top: 15vh;
  overflow-y: scroll;
}
section {
  /* Snap align start. */
  scroll-snap-align: start;
}
header {
  position: fixed;
  height: 10vh;
}

<article>
  <header> Header </header>
  <section> Section One </section>
  <section> Section Two </section>
  <section> Section Three </section>
</article>

Scroll-Abstand und -Rahmen

Die Produktseite hat eine feste Kopfzeile. Außerdem sollte ein Teil des oberen Bereichs sichtbar bleiben, wenn der Scrollcontainer angedockt ist, um Nutzern einen Designhinweis auf die Inhalte darüber zu geben.

Das Attribut scroll-padding ist eine neue CSS-Eigenschaft, mit der der sichtbare sichtbare Bereich des Scroll-Containers (Snapports) angepasst werden kann. Dieser wird beim Berechnen der Scroll-Snap-Ausrichtung verwendet. Die Eigenschaft definiert einen Einsatz für das Padding-Feld des Scrollcontainers. In unserem Beispiel wurde oben ein zusätzlicher Einzug von 15vh hinzugefügt, der den Browser anweist, eine niedrigere Position, 15vh unterhalb des oberen Randes des Scrollcontainers, als vertikalen Startrand für das Scroll-Snapping zu verwenden. Beim Andocken wird die Startkante des Ausrichtungszielelements bündig mit dieser neuen Position ausgerichtet, sodass darüber Platz bleibt.

Das Attribut scroll-margin definiert den Outset-Betrag, der zum Anpassen des Felds für das effektive Ziel des Andockens verwendet wird, ähnlich wie scroll-padding im Snap-Scroll-Container.

Wie Sie vielleicht bemerkt haben, enthalten diese beiden Attribute nicht das Wort „snap“. Dies ist beabsichtigt, da das Feld tatsächlich für alle relevanten Scrollvorgänge geändert wird und nicht nur das Scroll-Andocken erfolgt. Chrome berücksichtigt diese beispielsweise beim Berechnen der Seitengröße für Scrollvorgänge wie „Bild-ab“ und „Bild-auf“ sowie beim Berechnen des Scrollumfangs für den Vorgang Element.scrollIntoView().

Interaktion mit anderen Scroll-APIs

DOM Scrolling API

Das Scroll-Snapping erfolgt nach allen Scrollvorgängen, einschließlich derjenigen, die durch ein Script initiiert wurden. Wenn Sie APIs wie Element.scrollTo verwenden, berechnet der Browser die gewünschte Scrollposition des Vorgangs und wendet dann eine geeignete Ausrichtungslogik an, um die endgültige Position zu ermitteln. Daher muss ein Nutzerskript keine manuellen Berechnungen für das Andocken vornehmen.

Reibungsloses Scrollen

Optimiertes Scrollen steuert das Verhalten eines programmatischen Scrollvorgangs, während das Scroll-Snap-Ziel das Ziel bestimmt. Da sie orthogonale Aspekte des Scrollens steuern, können sie zusammen verwendet und sich ergänzen.

Overscroll-Verhalten

Die Overscroll Behavior API steuert, wie das Scrollen über mehrere Elemente hinweg verkettet wird, ohne dass es vom Scroll-Snap beeinflusst wird.

Einschränkungen und Best Practices

Vermeiden Sie das obligatorische Andocken, wenn die Zielelemente zu großen Abständen voneinander entfernt sind. Dies kann dazu führen, dass Inhalte zwischen den Andockpositionen nicht mehr zugänglich sind.

In vielen Fällen kann das Scrollen durch Andocken als Verbesserung hinzugefügt werden, ohne dass eine Feature-Erkennung erforderlich ist. Falls erforderlich, verwenden Sie @supports oder CSS.supports, um zu prüfen, ob CSS-Scroll-Snap unterstützt wird. Verwenden Sie scroll-snap-type nicht, da dieses Zeichen auch in der eingestellten Spezifikation enthalten ist.

Funktionserkennung in CSS

@supports (scroll-snap-align: start) {
  article {
    scroll-snap-type: y proximity;
    scroll-padding-top: 15vh;
    overflow-y: scroll;
  }
}

Funktionserkennung in JavaScript

if (CSS.supports('scroll-snap-align: start')) {
  // use css scroll snap
} else {
  // use fallback
}

Gehen Sie nicht davon aus, dass APIs zum programmatischen Scrollen wie Element.scrollTo immer am angeforderten Scroll-Offset enden. Durch das Scroll-Snapping wird der Scroll-Offset möglicherweise angepasst, nachdem das programmatische Scrollen abgeschlossen ist. Diese Annahme war schon vor der Einführung von Scroll-Snapping nicht sinnvoll, da das Scrollen aus anderen Gründen unterbrochen werden kann. Das gilt aber vor allem für Scroll-Snapping.

Zukünftige Arbeiten

Das Scrollen stand im Mittelpunkt einer aktuellen Umfrage des Chrome-Teams. Die Umfrageergebnisse haben mehrere Bereiche aufgezeigt, in denen zusätzliche Arbeit erforderlich ist, um die Lücke zwischen Plug-in-Bibliotheken und CSS zu schließen. Die anstehenden Aufgaben konzentrieren sich auf scroll-snap, einschließlich:

1. Verfügbarkeit und browserübergreifende API-Kompatibilität
2. Arbeiten Sie an neuen CSS APIs wie scroll-start.
3. Mit neuen JS-Ereignissen wie snapChanged() arbeiten.