CSS κύρια ιδιότητα scroll-padding-top

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

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

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

Η θέση προσαρμογής από}} scroll-snap-align ιδιότητες ρύθμισης, αλλά μπορεί να επηρεαστεί και από τις ιδιότητες της CSS Προσαρμογή και writing-mode η επίδραση.

Λήψη υπόψη:Αυτή η ιδιότητα λειτουργεί μόνο όταν η θέση προσαρμογής είναι στη κορυφή του υποστοιχείου.

Για να δείτε scroll-padding-top ιδιότητες, για να δείτε το αποτέλεσμα, πρέπει να ρυθμιστούν στις υποστοιχεία του γονικού στοιχείου scroll-snap-align ιδιότητες, και πρέπει να ρυθμιστούν στις υποστοιχεία του γονικού στοιχείου scroll-padding-top και scroll-snap-type Ιδιότητα.

Παράδειγμα

Παράδειγμα 1

Ρυθμίστε το περιθώριο ροής να είναι από την κορυφή του κουτιού στην θέση προσαρμογής 20px:

div {
  scroll-padding-top: 20px;
}

Προσπαθήστε το προσωπικά

Παράδειγμα 2: Βιβλιοθήκη εικόνων

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

#container {
  scroll-padding-top: 30px;
}

Προσπαθήστε το προσωπικά

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

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

#container {
  scroll-padding-top: 30px;
}

Προσπαθήστε το προσωπικά

Παράδειγμα 4: Θέση προσαρμογής

Για να κάνετε scroll-padding-top Η ιδιότητα θα λειτουργήσει, η θέση της προσαρμογής πρέπει να ρυθμιστεί στην κορυφή του υποστοιχείου. Σε αυτό το παράδειγμα,writing-mode Η ιδιότητα θα προσαρμόσει τη θέση από την κορυφή του υποστοιχείου στο δεξί. Χρησιμοποιώντας αυτό το κώδικα,scroll-padding-top Η ιδιότητα δεν θα λειτουργήσει πλέον:

#container {
  writing-mode: vertical-rl;
  scroll-padding-top: 30px;
}
#container > div {
  scroll-snap-align: start none;
}

Προσπαθήστε το προσωπικά

Γλώσσα γραφικής γλώσσας

scroll-padding-top: auto|τιμή|initial|inherit;

Τιμή του ατριβού

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

Ορισμός με μονάδες όπως px, pt, cm για το scroll-padding-top.

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

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

Προεπιλεγμένη τιμή: αυτόματα
Προκλητικότητα: Όχι
Προσθήκη αニμάτισης: Δεν υποστηρίζεται. Δείτε επίσης:Ατрибούτα της αニμάτισης.
Έκδοση: CSS3
Γλώσσα γραφικής γλώσσας: object.style.scrollPaddingTop="20px"

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

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

Χρωμών Όριο Φαύρος Σαφάρι Οπερά
69.0 79.0 68.0 14.1 56.0

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

Αναφορά:CSS direction ιδιότητα

Αναφορά:CSS κύρια ιδιότητα scroll-snap-align

Αναφορά:CSS κύρια ιδιότητα scroll-snap-type

Αναφορά:CSS μορφή γραφής attribute