Περιθώριο κύλισης - CSS-Κόλπα

Anonim

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

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

Εισαγάγετε περιθώριο κύλισης

scroll-marginχρησιμοποιείται για την προσαρμογή της περιοχής snap ενός στοιχείου (το πλαίσιο που καθορίζει το σημείο στο οποίο θα κουμπωθεί). Η προσθήκη scroll-marginείναι χρήσιμη όταν πρέπει να δώσετε ένα στοιχείο χώρο από την άκρη του κοντέινερ όταν ασφαλίσει στη θέση του, αλλά επιτρέποντας καταστάσεις όπου κάθε στοιχείο μπορεί να χρειαστεί ελαφρώς διαφορετική απόσταση. Εάν όλα τα στοιχεία έχουν τις ίδιες απαιτήσεις απόστασης, εξετάστε το ενδεχόμενο να χρησιμοποιήσετε scroll-paddingτο γονικό κοντέινερ αντί scroll-marginγιατί αυτό επηρεάζει την απόσταση για όλα τα στοιχεία εντός του κοντέινερ.

Ένα απλό παράδειγμα όπου το scroll-marginεπιτρέπει για 50px απόσταση γύρω από το επάνω και το αριστερό ενός στοιχείου μοιάζει με αυτό:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
Η ροζ περιοχή αντιπροσωπεύει το scroll-marginσε αυτό το στοιχείο.

Σύνταξη

/* Shorthand */ scroll-margin: (1,4); /* Longhands */ scroll-margin-top: ; scroll-margin-right: ; scroll-margin-bottom: ; scroll-margin-left: ; /* inline-specific and block-specific properties as well */ scroll-margin-block: (1,2); scroll-margin-inline: (1,2);

Σημαντική σημείωση για longhands: Το Chrome (και πιθανώς άλλα προγράμματα περιήγησης) δεν υποστηρίζει προς το παρόν τη μορφή scroll-paddingκαι τις scroll-marginιδιότητες longhand . Χρησιμοποιήστε το στενό για μέγιστη υποστήριξη προγράμματος περιήγησης. Δείτε αυτό το ζήτημα στο πρόγραμμα παρακολούθησης σφαλμάτων χρωμίου για περισσότερες λεπτομέρειες και την τρέχουσα κατάσταση.

Αξίες

scroll-marginαποδέχεται η ακόλουθη ένα μήκος αξίας, το οποίο είναι γραμμένο παρόμοια με marginκαι άλλες ιδιότητες, όπου η τιμή μπορεί να ορίζεται με μονάδες ( px, em, vh, κλπ). Ανατρέξτε στην ενότητα Τιμές και μονάδες W3C για περισσότερες πληροφορίες. Τα ποσοστά δεν μπορούν να χρησιμοποιηθούν scroll-marginσύμφωνα με την προδιαγραφή.

Παράδειγμα

Ανατρέξτε στο παράδειγμα του Pen-scroll
Pending από 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-snap-type
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Πόροι

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