Κύλινδρο-επένδυση - CSS-Κόλπα

Anonim

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

scroll-paddingείναι μια προαιρετική ιδιότητα για οποιοδήποτε κοντέινερ με δυνατότητα κύλισης. Τα κοντέινερ με δυνατότητα κύλισης ορίζονται κάθε φορά που η scroll-snap-typeιδιότητα ορίζεται σε οποιαδήποτε άλλη τιμή none. Για περισσότερες πληροφορίες σχετικά με τα περιεχόμενα κύλισης, ανατρέξτε στην scroll-snap-typeκαταχώριση almanac

Εντάξει, προχωρήστε λοιπόν στην κύλιση

scroll-paddingχρησιμοποιείται για τη ρύθμιση της βέλτιστης περιοχής προβολής του περιέκτη. Αυτό είναι χρήσιμο εάν το δοχείο έχει στοιχεία όπως μια σταθερή κεφαλίδα που θα αποκρύψει στοιχεία μέσα ή εάν το κυλιόμενο δοχείο χρειάζεται αρκετό χώρο για να δώσει στα εσωτερικά στοιχεία χώρο να αναπνέει μόλις «σπάσουν» στη θέση τους.

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

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Οι περιοχές με ροζ χρώμα δείχνουν την επένδυση κύλισης στο δοχείο με δυνατότητα κύλισης.

Σύνταξη

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

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

Αξίες

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

  • autoαφήνει την επένδυση να καθοριστεί από το πρόγραμμα περιήγησης / πράκτορα χρήστη. Γενικά, αυτό σημαίνει τιμή 0px, αλλά μπορεί να είναι μη μηδενική εάν ο πράκτορας χρήστη αποφασίσει ότι μια άλλη τιμή είναι πιο κατάλληλη.
  • είναι γραμμένο παρόμοια με paddingκαι άλλες ιδιότητες, όπου η τιμή μπορεί να ορίζεται με μονάδες ( px, em, vh, κλπ) ή ως ποσοστό του ίδιου του δοχείου.

Παράδειγμα

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