Eine Einführung in CSS-Scroll-Fangpunkte

Das CSS-Scroll-Snap-Modul ist ein Webstandard, über den wir etwas Kontrolle haben Scrollen auf einer Webseite So können wir die Benutzer dazu bringen, zu bestimmten Teilen einer Seite zu blättern, anstatt sie einfach irgendwo auf der Seite anzuzeigen.

Scrollen ist eine der am häufigsten durchgeführten Aktionen auf einer Website. Browser haben über die Jahre hinweg verbesserte ihre Scroll-Leistung um die agile Fingerkraft der Benutzer anzupassen. Und Entwickler haben es Scrollen kreativ genutzt um eine bessere oder eine sofortige Benutzererfahrung zu erzielen.

Wenn es jedoch um die Korrelation zwischen geht Codierung und Scrollen, Nur JavaScript schien über letzteren Einfluss zu haben. Dies war lange Zeit so, aber mit der Einführung von Scroll-Fangpunkten, CSS begann aufzuholen.

Scrollen ohne Bildlaufpunkte

Normalerweise scrollen wir nicht sehr langsam, besonders auf Handys. Je schneller Sie scrollen, desto weniger Kontrolle haben Sie wo auf dem Bildschirm wirst du enden wenn Sie aufgehört haben zu scrollen.

Stellen Sie sich vor, Sie scrollen durch eine Reihe von Produktbildern auf einer Website oder durch eine Galerie von Fotos oder Online-Folien. Was Sie in solchen Anwendungen bevorzugen, ist Sehen Sie sich das gesamte Produkt, Foto oder die Folie an jedes Mal, wenn Sie blättern. Nicht nur eine Teil des Produktbildes, des Fotos oder der Folie.

In der folgenden Demo können Sie beispielsweise nur sehen, wenn der Benutzer den Bildlauf stoppt etwa die Hälfte des Bildes ist sichtbar am unteren Rand des Bildschirms. Die meisten Benutzer möchten jedoch das letzte Bild vollständig sehen.

Scrollen mit Bildlaufpunkten

Hier bringen wir ein CSS-Bildlaufpunkte. Der Name ist selbsterklärend. Es ist ein CSS-Standard, der es uns erlaubt Einrasten von Gegenständen beim Scrollen.

Es gibt fünf CSS-Eigenschaften das diesen Standard ausmachen:

1. Scroll-Snap-Typ
2. scroll-snap-points-x
3. scroll-snap-points-y
4. Scroll-Snap-Koordinate
5. Scroll-Snap-Ziel

Browser-Unterstützung

Die Eigenschaften brauchen -Webkit und -Frau Präfixe für die relevanten Browser. Zum Zeitpunkt der Erstellung dieses Artikels wird der CSS-Scroll-Snap in Chrome und Opera nicht unterstützt.

Beachten Sie, dass die letzten vier Eigenschaften in naher Zukunft wahrscheinlich von Benutzeragenten gelöscht werden. Stattdessen, neue Eigenschaften, nämlich scroll-snap-align, Scroll-Snap-Rand, und Scroll-Snap-Padding, könnte erstellt werden, wie in dieser Spezifikation definiert.

Sie werden jedoch einen ähnlichen Zweck haben wie die früheren Eigenschaften. Derzeit werden die früheren Eigenschaften gut funktionieren.

Eigenschaften

Du musst Ergänzen Sie die Scroll-Snap-Typ Eigenschaft für den Bildlaufcontainer (Das Containerelement, dessen untergeordnete Elemente beim Scrollen überlaufen). Es gibt die Strenge der Schnappaktion. Es kann drei Werte annehmen:

1. verpflichtend - Wenn der Bildlauf abgeschlossen ist, wird der Bildlauf durchgeführt Einrasten an einem relevanten Einrastpunkt
2. Nähe - weniger streng als verpflichtend; es wird abhängig vom Urteil des UA Gibt an, ob das Element an einem bestimmten Fangpunkt einrastet
3. keiner - Es wird kein Schnappen gemacht

Das scroll-snap-points-x und scroll-snap-points-y Eigenschaften gehören zum Scroll-Container, auch. Sie beziehen sich auf Punkte auf der X- und Y-Achse, an denen die Fangpunkte vorhanden sind. Ihr Wert ist gegeben von der wiederholen() Funktion. Zum Beispiel, wenn Sie Fangpunkte entlang der x-Achse im Abstand von hinzufügen möchten 100px Sie müssen das verwenden scroll-snap-points-x: wiederholen (100px) Regel.

Das Scroll-Snap-Ziel Diese Eigenschaft wird auch dem Bildlaufcontainer hinzugefügt. Es Definiert eine Koordinate im Container wo ein Ziel liegt. An diesem Fangort schnappen die untergeordneten Objekte des Containers beim Scrollen ein.

Du kannst den ... benutzen Scroll-Snap-Koordinate Immobilien in Verbindung mit Scroll-Snap-Ziel. Sie müssen es den untergeordneten Elementen des Containers hinzufügen. Es Definiert die Koordinaten von untergeordneten Elementen, Dies wird an den Zielkoordinaten ihres Bildlaufcontainers ausgerichtet, wenn der Benutzer den Bildschirm scrollt.

Beachten Sie, dass Sie nicht alle Eigenschaften gleichzeitig verwenden müssen. Nur Scroll-Snap-Typ Ist verpflichtend. Außerdem können Sie entweder einzelne Fangpunkte definieren oder die Zielkoordinatenkombination verwenden.

Code-Beispiel

Hier ist ein Beispiel für einen Code-Ausschnitt typischer Bildlaufcontainer, mit Scrollen in vertikaler Richtung und einige Bilder im Inneren. Es gibt die Demo aus, die Sie am Anfang dieses Beitrags finden können.

 div Breite: 300px; Höhe: 300px; Überlauf: Auto;… div> img Breite: 250px; Höhe: 150px;… 

Jetzt wir fügen Sie einige Fangpunkte hinzu zum Scroll-Container:

 div Breite: 300px; Überlauf: Auto; scroll-snap-points-y: wiederholen (150px); Scroll-Snap-Typ: obligatorisch;  

Unten sehen Sie, wie die Ausgabe mit aussieht CSS-Fangpunkte hinzugefügt. Beachten Sie immer, wenn der Bildlauf stoppt, während das untere Bild nur teilweise sichtbar ist Vollbild erscheint nachdem der Scrollport an einem Einrastpunkt darüber einrastet.