Η ιδιότητα scroll-margin-bottom του CSS

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

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

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

προσαρμογής θεση προσαρμογής Η θέση προσαρμογής καθορίζεται από την ρύθμιση της ιδιότητας κατεύθυνση Η θέση προσαρμογής είναι η θέση που το υποστοιχείο προσαρμόζεται στο κουτί όταν σταματά η κύρια περιήγηση. writing-mode η επίδραση.

Σημείωση:Η θέση προσαρμογής είναι έγκυρη μόνο όταν η θέση προσαρμογής ορίζεται στο κάτω μέρος του υποστοιχείου.

επηρεάζεται από την ρύθμιση της ιδιότητας scroll-margin-bottom επηρεάζεται από την ρύθμιση της ιδιότητας scroll-margin-bottom Η θέση προσαρμογής είναι η θέση που το υποστοιχείο προσαρμόζεται στο κουτί όταν σταματά η κύρια περιήγηση. θεση προσαρμογής Η ιδιότητα είναι έγκυρη μόνο όταν η θέση προσαρμογής ορίζεται στο κάτω μέρος του υποστοιχείου. scroll-snap-type Ιδιότητα.

Παράδειγμα

Παράδειγμα 1

Ρυθμίστε την εξωτερική περιθαλάσση κάτω από την θέση προσαρμογής με το κουτί σε 20px:

div {
  scroll-margin-bottom: 20px;
}

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

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

scroll-margin-bottom Η ιδιότητα μπορεί να χρησιμοποιηθεί σε φωτογραφικές συλλογές με συμπεριφορά προσαρμογής.scroll-margin-bottom Προσπαθήστε να δείτε ότι υπάρχει ακόμα μια εικόνα στο κάτω μέρος. Σκрольτε πάνω από την πρώτη εικόνα για να δείτε το αποτέλεσμα:

#container > img {
  scroll-margin-bottom: 30px;
}

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

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

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

#container {
  writing-mode: vertical-rl;
}
#container > div {
  scroll-margin-bottom: 30px;
  scroll-snap-align: end none;
}

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

Γλώσσα γραφής του CSS

scroll-margin-bottom: 0|τιμή|αρχική|παράδοση;

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

Τιμή Περιγραφή
0 Η κάτω εξωτερική περιθαλάσση της κύριας περιήγησης είναι 0. Αυτό είναι η προεπιλεγμένη τιμή.
μήκος

Ορισμός της κάτω εξωτερικής περιθαλάσσης της κύριας περιήγησης με μονάδες όπως px, pt, cm κ.λπ. Επιτρέπεται η χρήση αρνητικών τιμών.

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

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

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

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

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

Χρωμέι Εντζ Φάιρεξ Σαφάρι Οπερα
69.0 79.0 68.0 14.1 56.0

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

Αναφορά:Άρτη direction

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

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

Αναφορά:CSS γραφή τύπος ιδιότητα