CSS scroll-padding-inline-start attribute

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

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

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

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

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

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

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

Παράδειγμα

Παράδειγμα 1

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

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

Προσπαθήστε να το δοκιμάσετε شخصικά

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

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

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

Προσπαθήστε να το δοκιμάσετε شخصικά

Παράδειγμα 3

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

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

Προσπαθήστε να το δοκιμάσετε شخصικά

Παράδειγμα 4

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

#container {
  scroll-padding-inline-start: 20px;
  διεύθυνση: rtl;
}

Προσπαθήστε να το δοκιμάσετε شخصικά

Γλώσσα γράψματος CSS

scroll-padding-inline-start: αυτόματα|τιμή|initial|κληρονομικότητα;

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

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

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

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

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

Αναφορά:CSS direction attribute

Αναφορά:CSS scroll-snap-align attribute

Αναφορά:CSS scroll-snap-type attribute

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