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

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

scroll-margin-left Η ιδιότητα καθορίζει τη διαφορά μεταξύ της θέσης της αλληλεπίδρασης και του κουτιού.

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

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

να δεις scroll-margin-left η επίδραση της ιδιότητας, πρέπει να ρυθμιστεί στο υποστοιχείο scroll-margin-left και scroll-snap-align στην κύρια στοιχείο και ρυθμίσε ιδιότητα ιδιότητα.

Παράδειγμα

Παράδειγμα 1

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

div {
  scroll-margin-left: 20px;
}

Δοκίμασε να το κάνεις με τις δικές σου χέρια

Παράδειγμα 2: Συλλογή εικόνων

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

#container > img {
  scroll-margin-left: 30px;
}

Δοκίμασε να το κάνεις με τις δικές σου χέρια

Παράδειγμα 3: Θέση αλληλεπίδρασης

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

#container {
  direction: rtl;
}
#container > div {
  scroll-margin-left: 30px;
  scroll-snap-align: none start;
}

Δοκίμασε να το κάνεις με τις δικές σου χέρια

Γλώσσα CSS

scroll-margin-left: 0|value|initial|inherit;

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

Τιμή Περιγραφή
0 Το αριστερό περιθώριο κύλισης είναι 0. Προεπιλεγμένη τιμή.
length

Δημιούργησε τιμές για το αριστερό περιθώριο κύλισης με μονάδες px, pt, cm κ.λπ. Απαριθμούνται οι αρνητικές τιμές.

Δες:Μονάδες του CSS.
initial Ρυθμίζεις την ιδιότητα σε την προεπιλεγμένη τιμή. Δες: initial.
inherit Εκκινήσεις από το γονικό στοιχείο και την ιδιότητα. Δες: inherit.

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

Προεπιλεγμένη τιμή: 0
Ερμηνεία: Όχι
Παραγωγή κίνησης: Δεν υποστηρίζεται. Εξέτασε:Ιδιότητες σχετικές με την κίνηση.
Έκδοση: CSS3
Γλώσσα προγραμματισμού JavaScript: object.style.scrollMarginLeft="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 属性