CSS scroll-margin-block-end ιδιότητα

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

scroll-margin-block-end Η ιδιότητα καθορίζει την απόσταση από τη θέση ευθυγράμμισης στην κατεύθυνση του τομέα στον κουτί.

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

Η κατεύθυνση του τομέα είναι η θέση σε σχέση με την υπάρχουσα γραμμή, η κατεύθυνση στην οποία το επόμενο κελί τοποθετείται. Αυτό είναι επίσης ο τρόπος στοιχείων με CSS display: block; (όπως τα στοιχεία <p> και <div>) να είναι διαμορφωμένα στη σελίδα. Η κατεύθυνση του τομέα εξαρτάται από τη γλώσσα γραφής, π.χ., η νέα γραμμή της μογγολικής γλώσσας είναι διατεταγμένη από αριστερά προς τα δεξιά, οπότε η κατεύθυνση του τομέα είναι επίσης από αριστερά προς τα δεξιά, ενώ η κατεύθυνση του τομέα στην αγγλική σελίδα είναι προς τα κάτω. Η κατεύθυνση του τομέα μπορεί να καθοριστεί με την ιδιότητα CSS writing-mode να οριστεί.

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

Σημείωση:Το ατρίβου είναι διαθέσιμο μόνο στην κατεύθυνση του τομής scroll-snap-align Το ατρίβου ορίζεται ως 'end' για να λειτουργήσει.

για να δείτε scroll-margin-block-end Το ατρίβου πρέπει να οριστεί scroll-margin-block-end και scroll-snap-align να οριστεί Το ατρίβου ατρίβου.

CSS scroll-margin-inline και scroll-margin-block Το ατρίβου είναι παρόμοιο με το ατρίβου CSS scroll-margin-top attributeκαιscroll-margin-bottomκαιscroll-margin-left και scroll-margin-right Πολύ παρόμοιο, αλλά scroll-margin-block και scroll-margin-inline Το ατρίβου εξαρτάται από την κατεύθυνση του τομής και την κατεύθυνση της γραμμής.

Παράδειγμα

Παράδειγμα 1

Στην κατεύθυνση του τομής, ορίζεται η θέση ευθυγράμμισης με το περιθώριο ροής 20px:

div {
  scroll-margin-block-end: 20px;
}

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

Παράδειγμα 2

Όταν το στοιχείο <div> έχει writing-mode Όταν η τιμή του ατριβού είναι vertical-rl, η κατεύθυνση του τομής είναι από δεξιά προς αριστερά. Το αποτέλεσμα είναι η άκρη του στοιχείου να μετακινείται από το κάτω προς τον αριστερό:

div {
  scroll-margin-block-end: 50px;
  writing-mode: vertical-rl;
}

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

Γλώσσα CSS

scroll-margin-block-end: 0|value|initial|inherit;

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

Τιμή Περιγραφή
0 Προεπιλεγμένη. Η προεπιλεγμένη απόσταση scroll-margin-block-end του στοιχείου.
length

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

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

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

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

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

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

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

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

Παραδείγματα:CSS scroll-snap-align attribute

Παραδείγματα:CSS scroll-snap-type attribute

Παραδείγματα:Η ιδιότητα writing-mode του CSS