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

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

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

Αυτό σημαίνει ότι όταν σταματήσετε το ψυγμένο κείμενο, η ψύξη θα προσαρμοστεί γρήγορα και θα σταματήσει στην καθορισμένη απόσταση από την αρχική θέση του υποεлементου στην κατεύθυνση της γραμμής.

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

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

Λάβετε υπόψη:Αυτή η ιδιότητα λειτουργεί μόνο scroll-snap-align λειτουργούν μόνο όταν η κατεύθυνση της γραμμής είναι 'start'.

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

Παράδειγμα

Παράδειγμα 1

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

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

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

Παράδειγμα 2

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

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

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

Παράδειγμα 3

Όταν η τιμή του στοιχείου <div> είναι direction Όταν η τιμή της ιδιότητας είναι rtl, η κατεύθυνση της γραμμής είναι από δεξιά προς αριστερά. Το αποτέλεσμα είναι η θέση του στοιχείου να προσαρμόζεται από τη δεξιά (σχετικά με την αρχική κατεύθυνση, στην πραγματικότητα ξεκινάει από τη δεξιά, αλλά εδώ η "δεξιά" αναφέρεται στην αριστερή πλευρά της αρχικής προεπιλεγμένης κατεύθυνσης ltr) ρυθμίζεται:

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

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

ΓλωσσάramaCSS

inset-inline-start: 0|value|initial|inherit;

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

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

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

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

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

Παρατηρήσεις:CSS direction προσιόν

Παρατηρήσεις:CSS scroll-snap-align ιδιότητα

Παρατηρήσεις:CSS scroll-snap-type ιδιότητα

Παρατηρήσεις:Στυλ γραφής CSS