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

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

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

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

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

Ορισμός.

Η θέση της πίσω πλευράς είναι η θέση όπου το στοιχείο στο κουτί θα παραμείνει όταν σταματήσετε το κύλιση.Σημείωση: scroll-snap-align Αυτή η ιδιότητα λειτουργεί μόνο στην κατεύθυνση του τομής

να λειτουργήσει όταν η ιδιότητα ορίζεται ως 'start'. scroll-margin-block-start ιδιότητας, για να δει το αποτέλεσμα της ιδιότητας scroll-margin-block-start και 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

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

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

Δοκιμάστε το προσωπικά

Παράδειγμα 2

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

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

Δοκιμάστε το προσωπικά

Γλώσσα CSS

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

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

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

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

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

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

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

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

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

Chrome Edge Firefox Safari Όπερα
69.0 79.0 68.0 14.1 56.0

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

Παραπομπές:CSS scroll-snap-align ιδιότητα

Παραπομπές:CSS scroll-snap-type ιδιότητα

Παραπομπές:CSS writing-mode ιδιότητα