Scroll-snap-type - CSS-Κόλπα

Anonim

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

Αυτό είναι χρήσιμο εάν θέλετε να σταματήσετε το πρόγραμμα περιήγησης σε συγκεκριμένα σημεία της σελίδας. Για παράδειγμα: Ένας χρήστης που περιηγείται σε μια συλλογή φωτογραφιών πιθανότατα δεν θέλει να κάνει κύλιση στα μισά του παρελθόντος μιας εικόνας - μάλλον θα προτιμούσε να έχει η εικόνα "snap" στη σωστή θέση κατά την κύλιση. Το Scroll snapping δίνει στους προγραμματιστές έναν καθαρό τρόπο CSS για τη διαχείριση αυτής της συμπεριφοράς.

scroll-snap-typeείναι μια απαιτούμενη ιδιότητα σε οποιοδήποτε κυλιόμενο κοντέινερ στο οποίο θέλετε να προσθέσετε κύλιση. Απαντά σε τρεις ερωτήσεις για ένα δοχείο κύλισης:

  1. Το κοντέινερ χρησιμοποιεί τη δυνατότητα κύλισης;
  2. Σε ποιον άξονα - x (οριζόντιος), y (κατακόρυφος), μπλοκ ή ενσωματωμένος - πρέπει να εφαρμοστεί το scroll snapping;
  3. Πώς πρέπει να συμπεριφέρεται το scroll snapping; Αναγκάζεται το 100% του χρόνου, ή ισχύει μόνο όταν ο χρήστης φτάσει «αρκετά κοντά» σε θέση snap; Περισσότερα για αυτό αργότερα.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Σύνταξη

scroll-snap-type: none | ( x | y | block | inline | both ) ( mandatory | proximity )

Αξίες

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

  • none απενεργοποιεί την κύλιση.
  • x επιτρέπει τη δυνατότητα κύλισης που τραβάει μόνο τον άξονα x.
  • y επιτρέπει τη δυνατότητα κύλισης που τραβάει μόνο τον άξονα y.
  • block επιτρέπει τη δυνατότητα κύλισης που τραβάει μόνο τον άξονα του μπλοκ.
  • inline Επιτρέπει την κύλιση με δυνατότητα κύλισης μόνο στον ενσωματωμένο άξονα.
  • bothεπιτρέπει την κύλιση που τραβάει και στους δύο άξονες (τους οποίους μπορείτε να σκεφτείτε ως xκαι y, ή inlineκαι block.
  • mandatory είναι μια τιμή αυστηρότητας που λέει στο πρόγραμμα περιήγησης να πηγαίνει πάντα σε μια θέση snap όταν δεν συμβαίνει κύλιση.
  • proximityείναι μια τιμή αυστηρότητας που λέει στο πρόγραμμα περιήγησης να μεταβεί σε μια θέση snap εάν μια ενέργεια κύλισης πλησιάζει αρκετά σε μια θέση snap. Εάν δεν είναι αρκετά κοντά, τότε το πρόγραμμα περιήγησης δεν πρέπει να κλείνει και η κύλιση θα συμπεριφέρεται κανονικά.

Παράδειγμα

Ανατρέξτε στο παράδειγμα τύπου scroll-snap Pen
με 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

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

  • scroll-padding
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Πόροι

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