Gesteuertes Scrollen mit CSS Scroll Snap

Legen Sie Positionen fest, an denen das Scrollen angetippt werden kann. So sorgen Sie für ein kontrolliertes Scrollen.

Robert Flack

Majid Valipour

Mit der Funktion CSS Scroll Snap können Webentwickler das Scrollen durch Angabe von Scroll-Andocken-Positionen vereinfachen. Häufig verwendete Artikel in nummerierten Artikeln und Bilderkarusselle sind Beispiele dafür. CSS Scroll Snap bietet eine nutzerfreundliche und konsistente API zum Erstellen dieser beliebten UX-Muster.

Hintergrund

Schutzhülle für Scroll-Snap

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

Der größte Nachteil beim Scrollen ist die mangelnde Genauigkeit. Selten ist das Scrollen auf einen Absatz oder Satz ausgerichtet. Dies ist bei paginierten oder segmentierten Inhalten mit sinnvollen Grenzen besonders ausgeprägt, wenn das Scrollen in der Mitte der Seite oder des Bildes endet und sie teilweise sichtbar bleibt. Diese Anwendungsfälle profitieren von einem gut kontrollierten Scrollen.

Webentwickler setzen schon lange auf JavaScript-basierte Lösungen zur Steuerung des Scrollens, um dieses Problem zu beheben. JavaScript-basierte Lösungen bieten jedoch keine vollständige Fidelity-Lösung, da keine primitiven Scroll-Anpassungen oder kein Zugriff auf zusammengesetztes Scrollen möglich sind. CSS Scroll Snap ermöglicht eine schnelle, hochwertige und nutzerfreundliche Lösung, die in allen Browsern einheitlich funktioniert.

Mit CSS Scroll Snap können Webautoren jeden Scrollcontainer mit Begrenzungen für Scroll-Vorgänge markieren, bis sie beendet werden. Browser wählen dann die geeignete Endposition basierend auf den Details des Scrollvorgangs, dem Layout und der Sichtbarkeit des Scrollcontainers sowie den Details der Andockpositionen aus und animieren sie dann reibungslos. Zurück zu unserem Beispiel von vorhin: Das sichtbare Bild rastet ein, wenn der Nutzer durch das Karussell scrollt. Durch JavaScript muss das Scrollen nicht angepasst werden.

CSS „Scroll Snap“

Durch das Einrasten beim Scrollen wird der Scrollversatz eines Scrollcontainers so angepasst, dass er sich nach Abschluss des Scrollvorgangs an einer bevorzugten Andockenposition befindet.

Für einen Scrollcontainer kann das Andocken beim Scrollen mithilfe der Eigenschaft scroll-snap-type aktiviert werden. Dadurch wird dem Browser mitgeteilt, dass er diesen Scroll-Container an die von den Nachfolgerelementen erzeugten Andockpositionen andocken soll. scroll-snap-type bestimmt die Achse, auf der gescrollt wird (x, y oder both), und den strikten Andocken: mandatory, proximity. Mehr dazu später.

Eine Einrastposition kann erzeugt werden, indem eine gewünschte Ausrichtung an einem Element deklariert wird. Diese Position ist der Scrollversatz, bei dem der nächste Ancestor-Scrollcontainer und das Element wie für die Achse angegeben ausgerichtet sind. Die folgenden Ausrichtungen sind auf jeder Achse möglich: start, end, center.

Eine start-Ausrichtung bedeutet, dass die Startkante des Scrollcontainers für den Snapport mit dem Startrand des Rastbereichs des Elements identisch sein muss. Ebenso bedeuten die Ausrichtungen von end und center, dass der Ende oder die Mitte des Scroll-Containers mit dem Ende oder der Mitte des Andockbereichs des Elements bündig sein muss.

Die folgenden Beispiele veranschaulichen die Verwendung dieser Konzepte.

Beispiel: Eine horizontale Galerie

Ein häufiger Anwendungsfall für das Scroll-Snap ist ein Bilderkarussell. Wenn du beispielsweise ein horizontales Bilderkarussell erstellen möchtest, das beim Scrollen an jedes Bild angedockt wird, kannst du für den Scrollcontainer ein obligatorisches scroll-snap-type auf der horizontalen Achse festlegen. Setze jedes Bild auf scroll-snap-align: center, damit das Bild 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 Andockpositionen mit einem Element verknüpft sind, kann der Andock-Algorithmus intelligent sein, wann und wie das Andocken angesichts des Elements und der Größe des Scroll-Containers erfolgt. Angenommen, ein Bild ist größer als das Karussell. Ein naiver Snap-Algorithmus hindert Nutzer möglicherweise daran, zu schwenken, um das vollständige Bild zu sehen. Die Spezifikation erfordert jedoch Implementierungen, um diesen Fall zu erkennen und dem Nutzer zu ermöglichen, im Bild frei zu scrollen und nur an seinen Kanten einrasten zu müssen.

Beispiel: eine aufgerufene Produktseite

Auch Seiten mit mehreren logischen Abschnitten, die vertikal durchgescrollt werden können, sind Seiten mit mehreren logischen Abschnitten, die vom Scrollen profitieren können, z. B. eine typische Produktseite. scroll-snap-type: y proximity; eignet sich für solche Fälle besser. Es stört nicht, wenn ein Nutzer bis zur Mitte eines bestimmten Abschnitts scrollt, sondern schnappt auch und lenkt die Aufmerksamkeit auf einen neuen Abschnitt, wenn er nah genug scrollt.

So können Sie dies erreichen:

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>

Abstand und Rand scrollen

Die Produktseite hat eine feste Position im oberen Titelbereich. Im Rahmen des Designs sollte außerdem ein Teil des oberen Bereichs sichtbar bleiben, wenn der Scrollcontainer einrastet. So erhalten Nutzer einen Hinweis auf die oben genannten Inhalte.

Die scroll-padding-Eigenschaft ist eine neue CSS-Eigenschaft, mit der du den sichtbaren sichtbaren Bereich des Scrollcontainers bzw. des Snapports anpassen kannst. Er wird bei der Berechnung der Ausrichtungen beim Scrollen verwendet. Mit dieser Eigenschaft wird eine Einfügung in den Abstandsrahmen des Scrollcontainers definiert. In unserem Beispiel wurde oben der 15vh-Einsatz hinzugefügt, der den Browser anweist, eine niedrigere Position (15vh) unterhalb des oberen Rands des Scroll-Containers als vertikalen Startrand für das Scrollen zu verwenden. Beim Einrasten schließt sich der Startrand des Andockzielelements an diese neue Position an, sodass darüber Platz bleibt.

Die Eigenschaft scroll-margin definiert den Anfangsbetrag, der zum Anpassen des effektiven Rahmens für das Andockziel verwendet wird, ähnlich wie bei scroll-padding für den Container zum Ausrichten des Scrollrads.

Sie haben vielleicht bemerkt, dass diese beiden Properties nicht das Wort „snap“ enthalten. Das ist beabsichtigt, da sie das Feld für alle relevanten Scrollvorgänge ändern und nicht nur das Scrollen. Sie werden in Chrome beispielsweise bei der Berechnung der Seitengröße für Scroll-Vorgänge wie Bild-ab und Bild-auf sowie beim Berechnen des Scroll-Betrags für den Element.scrollIntoView()-Vorgang berücksichtigt.

Interaktion mit anderen Scroll-APIs

DOM Scrolling API

Das Andocken am Scrollen erfolgt nach allen Scrollvorgängen, einschließlich der durch ein Skript initiierten Scrollvorgänge. Wenn Sie APIs wie Element.scrollTo verwenden, berechnet der Browser die beabsichtigte Scrollposition des Vorgangs und wendet dann eine entsprechende Logik zum Ausrichten an, um die endgültige Position zu ermitteln. Daher muss das Nutzerskript keine manuellen Berechnungen für das Andocken vornehmen.

Optimiertes Scrollen

Mit gleichmäßigem Scrollen wird das Verhalten eines programmatischen Scrollvorgangs gesteuert, während durch das Scroll-Snap das Ziel bestimmt wird. Da sie orthogonale Aspekte des Scrollens steuern, können sie zusammen verwendet werden und sich gegenseitig ergänzen.

Overscroll-Verhalten

Die Overscroll Behavior API steuert, wie das Scrollen über mehrere Elemente hinweg verkettet ist, und wird durch das Scroll-Snap nicht beeinflusst.

Vorbehalte und Best Practices

Vermeiden Sie die Verwendung des obligatorischen Andockens, wenn Zielelemente weit voneinander entfernt sind. Dies kann dazu führen, dass Inhalte zwischen den Andockpositionen nicht mehr zugänglich sind.

In vielen Fällen kann das Scroll-Andocken als Verbesserung hinzugefügt werden, ohne dass eine Featureerkennung erforderlich ist. Verwenden Sie bei Bedarf @supports oder CSS.supports, um zu ermitteln, ob CSS Scroll Snap unterstützt wird. Vermeiden Sie die Verwendung von scroll-snap-type, das auch in der verworfenen Spezifikation vorhanden 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 programmatisch gescrollte APIs wie Element.scrollTo immer mit dem angeforderten Scrollversatz beendet werden. Durch das Ein-/Aus-Scrollen kann der Versatz nach Abschluss des programmatischen Scrollens angepasst werden. Dies war auch vor dem Scroll-Snap nicht eine gute Annahme, da das Scrollen möglicherweise aus anderen Gründen unterbrochen wurde. Dies gilt jedoch besonders für das Scroll-Andocken.

Zukünftige Arbeiten

In einer aktuellen Umfrage des Chrome-Teams ging es um die Scroll-Funktion. Die Umfrageergebnisse ergaben, dass mehrere Bereiche zusätzliche Arbeit erfordern, um die Lücke zwischen Plug-in-Bibliotheken und CSS zu verkleinern. Bei den nächsten Arbeiten geht es um scroll-snap, darunter:

1. Verfügbarkeit und Kompatibilität von APIs in verschiedenen Browsern
2. Arbeiten Sie an neuen CSS APIs wie scroll-start.
3. Sie können an neuen JS-Ereignissen wie snapChanged() arbeiten.