Η ιδιότητα scroll-padding-inline του CSS

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

scroll-padding-inline άρετη καθορίζει την απόσταση από το κουτί στο σημείο του αγκυρώματος του υιοθετημένου στοιχείου στην οριζόντια κατεύθυνση.

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

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

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

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

Η άρετη scroll-padding-inline είναι συντομευμένη άρετη των εξής:

• scroll-padding-inline-start
• scroll-padding-inline-end

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

Αν η άρετη scroll-padding-inline έχει δύο τιμές:

scroll-padding-inline: 10px 50px;

• η απόσταση από το αρχικό σημείο είναι 10px
• η απόσταση από το τελικό σημείο είναι 50px

Αν η άρετη scroll-padding-inline έχει μια τιμή:

scroll-padding-inline: 10px;

• η απόσταση από το αρχικό σημείο και το τελικό σημείο είναι 10px

για να δείτε scroll-padding-inline άρετη του αποτελεσματισμού, πρέπει να οριστεί στο υιοθετημένο στοιχείο scroll-snap-align άρετη, και πρέπει να οριστεί στο γονικό στοιχείο scroll-padding-inline και scroll-snap-type άρετη.

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

Παράδειγμα

Παράδειγμα 1

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

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

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

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

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

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

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

Παράδειγμα 3

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

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

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

Παράδειγμα 4

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

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

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

Γλώσσα CSS

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

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

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

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

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

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

Αναφορά:CSS direction attribute

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

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

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