CSS scroll-margin-inline attribute

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

scroll-margin-inline Η ιδιότητα καθορίζει την απόσταση μεταξύ της θέσης του αγκυρώματος και του κουτιού στον κατεύθυνση της γραμμής.

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

Η κατεύθυνση της γραμμής είναι η κατεύθυνση στην οποία το επόμενο χαρακτήριo τοποθετείται ως προς το υπάρχον χαρακτήριo στη γραμμή,这也是οι ετικέτες με CSS display: inline; (όπως τα ετικέτες <a> και <strong>) τοποθετούνται στον κείμενο. Η κατεύθυνση της γραμμής εξαρτάται από τη γλώσσα γραφής, για παράδειγμα, οι νέοι χαρακτήρες της αραβικής είναι οριζόντια από δεξιά προς αριστερά, οπότε η κατεύθυνση της γραμμής είναι από δεξιά προς αριστερά, ενώ η κατεύθυνση της γραμμής στην αγγλική σελίδα είναι από αριστερά προς δεξιά. Η κατεύθυνση της γραμμής μπορεί να ρυθμιστεί με την ιδιότητα CSS direction και writing-mode Ορισμός.

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

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

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

Αν η ιδιότητα scroll-margin-inline έχει δύο τιμές:

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

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

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

Για να δείτε scroll-margin-inline Η επίδραση της ιδιότητας πρέπει να ρυθμιστεί στους υποπλήκτες scroll-margin-inline και scroll-snap-align ιδιότητες, και στη γονική στοιχεία scroll-snap-type ιδιότητες.

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

Παράδειγμα

Παράδειγμα 1

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

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

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

Παράδειγμα 2

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

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

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

Παράδειγμα 3

Όταν το στοιχείο <div> έχει direction Όταν η τιμή της ιδιότητας είναι rtl, η κατεύθυνση του κειμένου είναι από δεξιά προς αριστερά. Το αποτέλεσμα είναι η αρχική θέση του στοιχείου να μετακινείται από την αριστερή πλευρά στη δεξιά και η τελική θέση του στοιχείου να μετακινείται από τη δεξιά πλευρά στην αριστερή. Αυτό επηρεάζει επίσης: scroll-margin-inline Ιδιότητα:

div {
  scroll-margin-inline: 0 20px;
  direction: rtl;
}

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

Γλώσσα CSS

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

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

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

Διακριθείς από px, pt, cm κ.λπ. Αποτελείται από αρνητικές τιμές.

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

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

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

Υποστήριξη περιηγητή

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

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

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

Αναφορά:CSS scroll-margin-inline-end attribute

Αναφορά:CSS scroll-margin-inline-start attribute

Αναφορά:CSS scroll-snap-align attribute

Αναφορά:CSS scroll-snap-type attribute

Αναφορά:Ιδιότητα writing-mode του CSS