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

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

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

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

Η θέση της αλληλεπίδρασης προσδιορίζεται από ιδιότητες, η επίδραση των οποίων πρέπει να ρυθμιστεί στο υποστοιχείο θεσμοθετημένα, αλλά μπορεί επίσης να επηρεάζονται από τις ιδιότητες CSS κατεύθυνση ιδιότητες, και να ρυθμιστούν στο γονικό στοιχείο writing-mode η επίδραση.

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

要看到 scroll-padding-left για να δείτε ιδιότητες, η επίδραση των οποίων πρέπει να ρυθμιστεί στο υποστοιχείο scroll-snap-align scroll-padding-left ιδιότητες, και να ρυθμιστούν στο γονικό στοιχείο και scroll-snap-type

ιδιότητας.

Παράδειγμα

Παράδειγμα 1

Ρυθμίστε το περιθώριο κύριας στροφής από το αριστερό μέρος του κουτιού στο σημείο αφοσιωμένης απόσταση 20px:
  div {
}

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

scroll-padding-left: 20px;

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

Η ιδιότητα μπορεί να χρησιμοποιηθεί σε φωτογραφικές συλλογές με吸附 behaviors για να βγάλει τις εικόνες από το πίσω στοιχείο στο πεδίο όρασης:
  scroll-padding-left: 30px;
}

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

#container > img {

Παράδειγμα 3: Ρύθμιση περιθωρίου κύριας στροφής στα αριστερά scroll-padding-left Η ιδιότητα μπορεί επίσης να ρυθμιστεί στο κουτί για να

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

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

Παράδειγμα 4: Θέση αφοσιωμένης

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

#container {
  κατεύθυνση: rtl;
  scroll-padding-left: 30px;
}
#container > div {
  scroll-snap-align: δεν υπάρχει αρχή;
}

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

Γλώσσα CSS

scroll-padding-left: αυτόματα|τιμή|αρχική|υποκείμενο;

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

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

Ορισμός με μονάδες όπως px, pt, cm για το scroll-padding-left.

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

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

Προεπιλεγμένη τιμή: αυτόματα
Προσδοκία: Όχι
Δημιουργία αニμασιών: Δεν υποστηρίζεται. Δείτε:Ιδιότητες αнимации.
Έκδοση: CSS3
Γλώσσα JavaScript: object.style.scrollPaddingLeft="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 writing-mode 属性