de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Eine Einführung in CSS-Scroll-Fangpunkte

Das CSS-Scroll-Snap-Modul ist ein Web-Standard, mit dem wir das Scrollen auf einer Webseite steuern können. So können wir den Nutzer dazu bringen, zu bestimmten Teilen einer Seite zu scrollen und nicht nur irgendwo auf der Seite.

Scrollen ist eine der am häufigsten durchgeführten Aktionen auf einer Website. Browser haben im Laufe der Jahre ihre Scroll-Leistung verbessert, um die agile Fingerstärke der Benutzer anzupassen. Und Entwickler haben das Scrollen kreativ genutzt, um eine bessere oder bessere Benutzererfahrung zu erzielen.

Wenn es jedoch um die Korrelation zwischen dem Codieren und dem Scrollen geht, scheint nur JavaScript eine gewisse Kontrolle über Letzteres zu haben. Dies war für eine lange Zeit, aber mit der Einführung von Scroll-Snap-Punkten begann CSS, aufzuholen.

Scrollen ohne Scroll-Fangpunkte

Normalerweise scrollen wir nicht sehr langsam, vor allem auf Telefonen. Je schneller Sie scrollen, desto weniger Kontrolle haben Sie darüber, wo Sie auf dem Bildschirm landen, wenn Sie nicht mehr scrollen.

Stellen Sie sich vor, Sie scrollen durch eine Reihe von Produktbildern auf einer Website oder einer Galerie von Fotos oder Online-Folien. Was Sie in solchen Anwendungen bevorzugen würden, ist das gesamte Produkt, Foto oder Folie bei jedem Scrollen zu sehen. Nicht nur ein Teil des Produkts Bild, Foto oder Folie.

Zum Beispiel können Sie in der Demo unten sehen, wann immer der Benutzer aufhört zu scrollen, nur etwa die Hälfte des Bildes ist am unteren Bildschirmrand sichtbar . Die meisten Benutzer würden es jedoch bevorzugen, das letzte Bild vollständig zu sehen.

Scrollen mit Scroll-Fangpunkten

Hier bringen wir CSS-Scroll-Fangpunkte ein . Der Name ist selbsterklärend; Es ist ein CSS-Standard, mit dem Sie Elemente beim Scrollen einrasten können .

Es gibt fünf CSS-Eigenschaften, die diesen Standard bilden:

  1. scroll-snap-type
  2. scroll-snap-points-x
  3. scroll-snap-points-y
  4. scroll-snap-coordinate
  5. scroll-snap-destination
Browserunterstützung

Die Eigenschaften benötigen die Präfixe -webkit und -ms für die entsprechenden Browser. Zum Zeitpunkt der Erstellung dieses Artikels wird der CSS-Bildlauf in Chrome und Opera nicht unterstützt.

Beachten Sie, dass die letzten vier Eigenschaften wahrscheinlich in naher Zukunft von Benutzeragenten gelöscht werden. Stattdessen können neue Eigenschaften wie scroll-snap-align, scroll-snap-margin und scroll-snap-padding erstellt werden, wie in dieser Spezifikation definiert.

Sie werden jedoch einen ähnlichen Zweck wie die früheren Eigenschaften haben. Zur Zeit wird die vorherige Reihe von Eigenschaften gut funktionieren.

Eigenschaften

Sie müssen dem scroll-snap-type Container die Eigenschaft scroll-snap-type hinzufügen (das Containerelement, dessen untergeordnete Objekte beim Scrollen überlaufen). Sie gibt die Strenge der Fangaktion an . Es kann drei Werte annehmen:

  1. mandatory - Wenn das Scrollen beendet ist, wird das Scrollen an einem relevanten Fangpunkt ausgeführt
  2. proximity - weniger streng als mandatory ; Es hängt von der Beurteilung des UA ab, ob das Element an einem bestimmten Fangpunkt einrastet
  3. none - es wird kein Snapping durchgeführt

Die Eigenschaften scroll-snap-points-x und scroll-snap-points-y gehören ebenfalls zum Scroll-Container . Sie beziehen sich auf Punkte auf der x- und y-Achse, an denen die Fangpunkte existieren. Ihr Wert wird durch die Funktion repeat() . Wenn Sie beispielsweise 100px entlang der X-Achse im Intervall von 100px hinzufügen möchten, 100px Sie die Regel scroll-snap-points-x: repeat(100px) .

Die Eigenschaft scroll-snap-destination wird auch dem Scroll-Container hinzugefügt. Er definiert eine Koordinate für den Container, in dem sich ein Fangziel befindet. An diesem Snap-Ziel werden die untergeordneten Elemente des Containers beim Scrollen einrasten.

Sie können die Eigenschaft scroll-snap-coordinate in Verbindung mit scroll-snap-destination . Sie müssen es den untergeordneten Elementen des Containers hinzufügen. Es definiert die Koordinaten der untergeordneten Elemente, die mit den Zielkoordinaten ihres Scroll-Containers übereinstimmen, wenn der Benutzer den Bildschirm scrollt.

Beachten Sie, dass Sie nicht alle Eigenschaften gleichzeitig verwenden müssen. Nur scroll-snap-type ist obligatorisch. Außerdem können Sie entweder einzelne Fangpunkte definieren oder die Zielkoordinatenkombination verwenden.

Codebeispiel

Hier ist ein Beispiel-Codeausschnitt für einen typischen Scroll-Container, mit Scrolling in vertikaler Richtung und einigen Bildern im Inneren . Es gibt die Demo aus, die Sie am Anfang dieses Posts finden können.

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

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

 div {Breite: 300px; Überlauf: Auto; scroll-snap-points-y: wiederhole (150px); scroll-snap-type: obligatorisch; } 

Im Folgenden sehen Sie, wie die Ausgabe mit hinzugefügten CSS-Fangpunkten aussieht. Wenn der Bildlauf angehalten wird, während das untere Bild nur teilweise sichtbar ist, wird das vollständige Bild angezeigt, nachdem der Bildlaufpunkt in einen Fangpunkt über dem Bild gerastet ist.

Ihr Android Phone ist verloren?  Hier ist, was Sie tun sollten

Ihr Android Phone ist verloren? Hier ist, was Sie tun sollten

Ich habe letztes Jahr mein Android-Handy an einen Dieb verloren. Ich verlor nicht nur das Gerät, sondern viele der wichtigen Daten, die ich darin gespeichert hatte, was mir viele Probleme bereitete. Aber durch all das habe ich auch viele wichtige Dinge darüber gelernt, was zu tun ist, sobald ich mein Telefon verloren habe und wie ich die Möglichkeit, irgendein Gerät zu verlieren oder zu verlieren, in Zukunft vielleicht verhindern oder minimieren kann.Die

(Tech- und Design-Tipps)

Wie man Facebook-Urheberschaft in WordPress hinzufügt

Wie man Facebook-Urheberschaft in WordPress hinzufügt

Facebook bietet eine Vielzahl von Dienstleistungen, um Websites im gesamten sozialen Netzwerk mehr Engagement, wie die Verwendung des Kommentars, in den Leuchtkasten, die eminent Like- Taste, und in jüngerer Zeit hat es die Author Tagging-Funktion verbessert. Der Author-Tag ermöglicht es Facebook, den freigegebenen Artikel mit dem Facebook-Profil des Autors zu versehen, sofern dieser bereitgestellt wird.B

(Tech- und Design-Tipps)