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

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

scroll-margin-right Η θέση του αγκυλώματος καθορίζεται από την ιδιότητα

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

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

Για να δείτε scroll-margin-right Η επίδραση των ιδιοτήτων πρέπει να ρυθμιστεί στο υποστοιχείο. scroll-margin-right και scroll-snap-align Η ιδιότητα, και πρέπει να ρυθμιστεί στο γονικό στοιχείο scroll-snap-type Ιδιότητα.

Παράδειγμα

Παράδειγμα 1

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

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

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

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

scroll-margin-right Η ιδιότητα μπορεί να χρησιμοποιηθεί σε φωτοθήκες με αγκύρωμα.scroll-margin-right Ενημερώστε τον χρήστη ότι υπάρχει ακόμα μια εικόνα στα δεξιά. Σκрольτε πάνω από την πρώτη εικόνα για να δείτε το αποτέλεσμα:

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

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

Παράδειγμα 3: Θέση αγκυλώματος

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

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

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

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

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

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

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

Καθορίστε την τιμή του εξωτερικού περιθώριου κύριου σωλήνα με μονάδες όπως px, pt, cm κ.λπ. Αναγνωρίζονται αρνητικές τιμές.

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

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

Προεπιλεγμένη τιμή: 0
Προέλευση: Όχι
Προσαρμογή: Δεν υποστηρίζεται. Δείτε επίσης:Προσαρμοστικές ιδιότητες.
Έκδοση: CSS3
Γλώσσα γράψματος: object.style.scrollMarginRight="20px"

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

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

Χρόμιο Εντζ Φάιρφξεξ Σάφάρι Οπερά
69.0 79.0 68.0 14.1 56.0

Σχετικές σελίδεςCSS direction ιδιότητα

Σχετικές σελίδεςCSS scroll-snap-align ιδιότητα

Σχετικές σελίδεςCSS scroll-snap-type ιδιότητα

Σχετικές σελίδεςCSS τεκμηρίωση τρόπου γραφής