CSS scroll-padding-right ιδιότητα

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

scroll-padding-right η ιδιότητα καθορίζει τη απόσταση από το δεξί μέρος του κουτί μέχρι τη θέση προσκόλλησης του υποσύνολου.

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

η θέση της προσκόλλησης από scroll-snap-align θέτηση ιδιοτήτων, αλλά μπορεί να επηρεάζεται και από τις ιδιότητες CSS direction και writing-mode η επίδρασή του.

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

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

Επίδειξη

Παράδειγμα 1

Ρυθμίστε το scroll-padding-right σε απόσταση 20px από το δεξί του κουτιού ως τη θέση του αγκυροδέσμου:

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

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

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

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

#container > img {
  scroll-padding-right: 30px;
}

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

Παράδειγμα 3: Ρύθμιση περιθωρίου ροής στο δεξί

Όταν έχουν ρυθμιστεί οι συμπεριφορές του αγκυροδέσμου σε δύο κατευθύνσεις, μπορείτε επίσης να ρυθμίσετε στο κουτί: scroll-padding-right Η ιδιότητα. Ρολάρετε οριζόντια στον επόμενο στοιχείο για να δείτε το αποτέλεσμα:

#container > div {
  scroll-padding-right: 30px;
}

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

Παράδειγμα 4: Θέση αγκυροδέσμου

Για να κάνετε scroll-padding-right Η ιδιότητα λειτουργεί, η θέση του αγκυροδέσμου πρέπει να ρυθμιστεί στο δεξί του υποστοιχείου. Σε αυτό το παράδειγμα:direction Η τιμή της ιδιότητας 'rtl' θα προσαρμόσει τη θέση από το δεξί του υποστοιχείου στο αριστερό. Χρησιμοποιώντας αυτό το κώδικα:scroll-padding-right Η ιδιότητα δεν θα λειτουργήσει πλέον:

#container {
  direction: rtl;
  scroll-padding-right: 30px;
}
#container > div {
  scroll-snap-align: none end;
}

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

Γλώσσα CSS

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

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

Τιμή Περιγραφή
auto Προεπιλεγμένη τιμή. Ο περιηγητής υπολογίζει το περιθώριο.
length

Καθορίστε το scroll-padding-right με μονάδες όπως px, pt, cm.

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

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

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

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

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

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

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

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

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

Αναφορά:CSS μορφή γραφής attribute