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

Anonim

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

scroll-snap-alignείναι μια απαιτούμενη ιδιότητα για ένα στοιχείο scroll-snapping μέσα σε ένα scroll-snapping container. Για περισσότερες πληροφορίες σχετικά με τα περιεχόμενα κύλισης, ανατρέξτε στην scroll-snap-typeκαταχώριση almanac scroll-snap-alignλέει το πρόγραμμα περιήγησης που μέρος ενός στοιχείου θα πρέπει να ευθυγραμμιστούν, όταν μια θραύση σημείο που συναντώνται: Σε περίπτωση που το στοιχείο θραύση στο start, centerή endτης μητρικής δοχείου που περιέχει το scroll-snap-typeακίνητο;

Εάν θέλετε ένα στοιχείο να τοποθετηθεί στη θέση του στην αρχή αυτού του στοιχείου, δώστε του μια scroll-snap-alignτιμή ως εξής:

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

Σύνταξη

scroll-snap-align: ( none | start | end | center )(1,2)

Μπορείτε να καθορίσετε έως και 2 τιμές για αυτήν την ιδιότητα, που αντιπροσωπεύουν τους άξονες μπλοκ και ενσωματωμένους, αντίστοιχα. Εάν δώσετε μόνο 1 τιμή, αυτή η τιμή θα χρησιμοποιηθεί και για τους δύο άξονες.

Αξίες

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

  • none απενεργοποιεί τη δυνατότητα κύλισης στο στοιχείο
  • start ευθυγραμμίζει την αρχή του στοιχείου με το snapport του περιέκτη κύλισης όταν ασφαλίζεται στη θέση του
  • end ευθυγραμμίζει το άκρο του στοιχείου με το snapport του περιέκτη κύλισης όταν ασφαλίζεται στη θέση του
  • center ευθυγραμμίζει το κέντρο του στοιχείου με το snapport του περιέκτη κύλισης όταν ασφαλίζεται στη θέση του

Παράδειγμα

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

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

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

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

Κινητό / Tablet

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

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

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-stop

Πόροι

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