Κύλιση-snap-stop - CSS-Κόλπα

Anonim

scroll-snap-stopείναι μέρος του CSS Scroll Snap Module. Το Scroll snapping αναφέρεται στο "κλείδωμα" της θέσης της θύρας προβολής σε συγκεκριμένα στοιχεία της σελίδας καθώς το παράθυρο (ή ένα δοχείο με δυνατότητα κύλισης) μετακινείται. Σκεφτείτε ένα δοχείο με δυνατότητα κύλισης, όπως να τοποθετήσετε έναν μαγνήτη πάνω από ένα στοιχείο που κολλά στην κορυφή της θύρας προβολής και αναγκάζει τη σελίδα να σταματήσει την κύλιση εκεί.

scroll-snap-stopείναι μια προαιρετική ιδιότητα για ένα στοιχείο scroll-snapping μέσα σε ένα scroll-snapping container. Για περισσότερες πληροφορίες σχετικά με τα περιεχόμενα κύλισης, ανατρέξτε στην scroll-snap-typeκαταχώριση almanac

scroll-snap-stopσάς επιτρέπει να αναγκάσετε να μετακινηθεί το κύλινδρο που σπάει με κύλιση σε ένα συγκεκριμένο στοιχείο. Ας υποθέσουμε ότι κάνατε κύλιση μέσα σε ένα δοχείο με δυνατότητα κύλισης και το δώσατε ένα τεράστιο περιστροφικό τροχό. Κανονικά, το πρόγραμμα περιήγησης θα άφηνε την ταχύτητα της κύλισης να πετάξει πέρα ​​από τα σημεία snap μέχρι να εγκατασταθεί σε ένα σημείο snap κοντά στο σημείο όπου τελειώνει κανονικά η κύλιση. Με τη ρύθμιση, scroll-snap-stopμπορείτε να πείτε στο πρόγραμμα περιήγησης ότι πρέπει να σταματήσει σε ένα συγκεκριμένο στοιχείο προτού επιτρέψετε στον χρήστη να το περάσει.

/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-stop: always; )

Σύνταξη

scroll-snap-stop: normal | always;

Αξίες

scroll-snap-stop αποδέχεται τις ακόλουθες τιμές:

  • normal είναι η προεπιλεγμένη τιμή και επιτρέπει σε ένα στοιχείο να μετακινηθεί στο παρελθόν χωρίς να κουμπώσει
  • always θα αναγκάσει το πρόγραμμα περιήγησης να προσπεράσει αυτό το στοιχείο, ακόμα κι αν η κύλιση συνήθως περάσει από αυτό το στοιχείο

Παράδειγμα

Δείτε το παράδειγμα
του scroll-snap-stop της πένας από CSS-Tricks (@ css-tricks) στο CodePen.

Υποστήριξη προγράμματος περιήγησης

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.

Επιφάνεια εργασίας

Χρώμιο Firefox ΙΕ Ακρη Σαφάρι
69 68 11 * 79 11

Κινητό / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 11.0-11.2

Λάβετε υπόψη ότι το Chrome ενδέχεται να μην υποστηρίζει αυτήν scroll-snap-stop: always;τη στιγμή.

Σχετιζομαι με

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-align

Πόροι

  • Σύσταση υποψηφίων CSS Scroll Snap W3C
  • Πρακτικό CSS Scroll Snapping
  • Παρουσιάζουμε CSS Scroll Snap Points