Αιτήματα CSS scroll-padding

Ορισμός και χρήση

scroll-padding Η ιδιότητα καθορίζει την απόσταση από το κουτί στο σημείο του υποσύνολου που είναι αφοσιωμένο.

Αυτό σημαίνει ότι όταν σταματάτε το ρολόι, η κίνηση ρυθμίζεται γρήγορα και σταματάει σε συγκεκριμένη απόσταση από το κουτί στο σημείο του υποσύνολου που είναι αφοσιωμένο.

Η θέση του αφοσίωσης είναι η θέση στην οποία το υποσύνολο στο εσωτερικό του κουτιού τοποθετείται σταματώντας το ρολόι.

scroll-padding Η ιδιότητα είναι η συντομευμένη μορφή των παρακάτω ιδιοτήτων:

scroll-padding Οι τιμές της ιδιότητας μπορούν να οριστούν με διάφορους τρόπους:

Αν η ιδιότητα scroll-padding έχει τέσσερις τιμές:

scroll-padding: 15px 30px 60px 90px;
  • Η απόσταση από την κορυφή είναι 15px
  • Η απόσταση από τη δεξιά πλευρά είναι 30px
  • Η απόσταση από το κάτω μέρος είναι 60px
  • Η απόσταση από την αριστερή πλευρά είναι 90px

Αν η ιδιότητα scroll-padding έχει τρεις τιμές:

scroll-padding: 15px 30px 60px;
  • Η απόσταση από την κορυφή είναι 15px
  • η απόσταση από την αριστερή και τη δεξιά πλευρά είναι 30px
  • Η απόσταση από το κάτω μέρος είναι 60px

Αν η ιδιότητα scroll-padding έχει δύο τιμές:

scroll-padding: 15px 30px;
  • Η απόσταση από την κορυφή και το κάτω μέρος είναι 15px
  • η απόσταση από την αριστερή και τη δεξιά πλευρά είναι 30px

Αν η ιδιότητα scroll-padding έχει μια τιμή:

scroll-padding: 10px;
  • οι τεσσάρες απόσταση όλων των πλευρών είναι 10px

για να δείτε scroll-padding στο στοιχείο scroll-snap-align ιδιότητας, και πρέπει να οριστεί η ιδιότητα scroll-padding και scroll-snap-type ιδιότητας.

Σημείωση:Στο παρακάτω παράδειγμα, ορίστηκαν οι περιθώρια εσωτερικού περιθωρίου για όλες τις πλευρές, αλλά λόγω scroll-snap-align Οριστεί ως "start", οπότε αλλάζει μόνο το περιθώριο εσωτερικού περιθωρίου της κορυφής και επηρεάζει τη συμπεριφορά της κύριας στήλης.

Παράδειγμα

Παράδειγμα 1

Ρυθμίστε το περιθώριο εσωτερικού περιθωρίου από το κουτί στο σημείο προσκόλλησης σε 20px:

div {
  scroll-padding: 20px;
}

Προσπαθήστε να το δοκιμάσετε!

Παράδειγμα 2: Συλλογή εικόνων

scroll-padding Η ιδιότητα μπορεί να χρησιμοποιηθεί σε φωτογραφικές συλλογές με προσκόλληση για να μετακινήσει τις εικόνες κάτω από το σταθερό στοιχείο:

#container {
  scroll-padding: 30px 0 0 0;
}
Σταθερός κορυφαίος στοιχείο
Πεκίνο Χορευτής Wuhan Tulip Hangzhou

Προσπαθήστε να το δοκιμάσετε!

Παράδειγμα 3: Ορισμός των περιθωρίων εσωτερικού περιθωρίου για την κορυφή και τη δεξιά πλευρά

scroll-padding Η ιδιότητα μπορεί να οριστεί και στην κορυφή και στην δεξιά πλευρά του κουτιού. Ξυπνήστε το κουτί και την οριζόντια και την κατακόρυφη στήλη για να δείτε τα αποτελέσματα:

#container {
  scroll-padding: 0 10px 30px 0;
}





Προσπαθήστε να το δοκιμάσετε!

Γλώσσα CSS

scroll-padding: αυτόματα|τιμή|initial|κληρονομικότητα;

Τιμή ιδιότητας

Τιμή Περιγραφή
αυτόματα Προεπιλεγμένη τιμή. Το πρόγραμμα περιήγησης υπολογίζει το περιθώριο εσωτερικού περιθωρίου.
μήκος

Ορίζει το περιθώριο εσωτερικού περιθωρίου με μονάδες όπως px, pt, cm κ.λπ.

Δεν επιτρέπεται η χρήση αρνητικών τιμών. Δείτε:Μονάδες CSS.
% Ορίζει το περιθώριο εσωτερικού περιθωρίου ως ποσοστό του πλάτους του περιεχομένου του περιβάλλοντος.
initial Θέστε αυτήν την ιδιότητα στην προεπιλεγμένη τιμή της. Δείτε: initial.
κληρονομικότητα Κληρονομεί αυτήν την ιδιότητα από το γονικό στοιχείο. Δείτε: κληρονομικότητα.

Τεχνικά λεπτομέρειες

Προεπιλεγμένη τιμή: αυτόματα
Κληρονομικότητα: όχι
Ανίμαση: μη υποστηριζόμενο. Δείτε:Αντιστοιχίες αニμασιών.
Έκδοση: CSS3
Γλώσσα JavaScript: object.style.scrollPadding="20px"

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

Τα αριθμήματα στην τάβλη επιδεικνύουν την έκδοση του πρώτου προγράμματος περιήγησης που υποστηρίζει αυτήν την ιδιότητα.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

σχετικές σελίδες

παραδείγματα:Αιτήματα CSS scroll-padding-bottom

παραδείγματα:Αιτήματα CSS scroll-padding-left

παραδείγματα:Αιτήματα CSS scroll-padding-right

παραδείγματα:Αιτήματα CSS scroll-padding-top

παραδείγματα:Αιτήματα CSS scroll-snap-align

παραδείγματα:Αιτήματα CSS scroll-snap-type