Παράγοντας scroll-margin-block του CSS

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

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

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

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

Η θέση του κράτηματος είναι η θέση στην οποία ο υποεлемент προσκολλάται στο κουτί όταν σταματάτε να σκορπίζετε.

Σημείωση:Αυτή η ιδιότητα είναι διαθέσιμη μόνο στην κατεύθυνση του τομέα του κειμένου: scroll-snap-align Η ιδιότητα είναι έγκυρη όταν οριστεί σε 'start' ή 'end'.

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

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

Εάν η ιδιότητα scroll-margin-block έχει δύο τιμές:

scroll-margin-block: 10px 50px;
  • Η απόσταση από την αρχή είναι 10px
  • Η απόσταση από το τέλος είναι 50px

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

scroll-margin-block: 10px;
  • Η απόσταση από την αρχή και το τέλος είναι 10px

Για να δείτε scroll-margin-block Η ιδιότητα scroll-margin-block και scroll-snap-align Η ιδιότητα scroll-snap-type ιδιότητας.

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

Παράδειγμα

Παράδειγμα 1

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

div {
  scroll-margin-block: 10px;
}

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

Παράδειγμα 2

Όταν το στοιχείο του υποστοιχείου writing-mode Όταν η τιμή της ιδιότητας είναι vertical-rl, η θέση του στοιχείου στην κατεύθυνση του τοίχου μετακινείται από το πάνω μέρος στο δεξί και το τέλος από το κάτω μέρος στο αριστερό. Αυτό επηρεάζει τη συμπεριφορά του αγκυρώματος κατά τη διάρκεια της κύλισης και scroll-margin-block Χρήση της ιδιότητας:

div {
  scroll-margin-block: 20px 0;
  writing-mode: vertical-rl;
}

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

Γλώσσα CSS

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

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

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

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

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

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

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

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

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

Χρωμίου Εντέντε Φάιρφοξ Σαφάρι ἐργοπλαστία
69.0 79.0 68.0 14.1 56.0

Σχετικές σελίδεςΠαράγοντας scroll-margin-block-end του CSS

Σχετικές σελίδεςΠαράγοντας scroll-margin-block-start του CSS

Σχετικές σελίδεςCSS scroll-snap-align ιδιότητα

Σχετικές σελίδεςCSS scroll-snap-type ιδιότητα

Σχετικές σελίδεςΕνότητα CSS writing-mode