CSS scroll-padding-inline-end ιδιότητα

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

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

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

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

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

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

για να δείτε scroll-padding-inline-end ιδιότητα στο γονικό στοιχείο, και πρέπει να οριστεί scroll-snap-align ιδιότητες, και πρέπει να οριστεί scroll-padding-inline-end και scroll-snap-type Ιδιότητα.

Εκτελεστική

Παράδειγμα 1

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

div {
  scroll-padding-inline-end: 20px;
}

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

Παράδειγμα 2: Βιβλιοθήκη εικόνων

scroll-padding-inline-end Η ιδιότητα μπορεί να χρησιμοποιηθεί σε γκαλερί με συμπεριφορά προσαρμογής για να βγάλει τις εικόνες από το σταθερό στοιχείο:

#container {
  scroll-padding-inline-end: 30px;
}

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

Παράδειγμα 3

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

#container {
  scroll-padding-inline-end: 20px;
  writing-mode: vertical-rl;
}

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

Παράδειγμα 4

Όταν το στοιχείο του κουτιού direction Όταν η τιμή της ιδιότητας είναι 'rtl', η κατεύθυνση του σεναρίου μετατοπίζεται από τα δεξιά στα αριστερά για τον πίνακα και τα στοιχεία του πίνακα, επηρεάζοντας τη συμπεριφορά της προσαρμογής του ρολογιού. scroll-padding-inline-end Πώς λειτουργεί η ιδιότητα:

#container {
  scroll-padding-inline-end: 20px;
  direction: rtl;
}

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

Γλώσσα CSS

scroll-padding-inline-end: auto|value|initial|inherit;

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

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

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

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

Σελίδες συναφείς

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

Αναφορά:CSS scroll-snap-align ιδιότητα

Αναφορά:CSS scroll-snap-type ιδιότητα

Αναφορά:CSS writing-mode 属性