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

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

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

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

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

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

Εξαίρεση

Παράδειγμα 1

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

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

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

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

scroll-margin-top Η ιδιότητα μπορεί να χρησιμοποιηθεί σε φωτογραφικές γκαλερί με συμπεριφορά αγκυλώματος. Εδώ:scroll-margin-top Προσπαθήστε να δείτε αν υπάρχουν ακόμα φωτογραφίες στην κορυφή. Σκrollάρετε πάνω από την πρώτη φωτογραφία για να δείτε το αποτέλεσμα:

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

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

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

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

#container {
  writing-mode: vertical-rl;
}
#container > div {
  scroll-margin-top: 30px;
  scroll-snap-align: start none;
}

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

ΓλωσσάramaCSS:

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

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

Τιμή Περιγραφή
0 Η κορυφαία κουλούρα της κουλούρας είναι 0. Αυτή είναι η προεπιλεγμένη τιμή.
length

Καθορίστε την τιμή της κορυφαίας κουλούρας της κουλούρας από τις μονάδες px, pt, cm κ.λπ. Επιτρέπεται η χρήση αρνητικών τιμών.

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

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

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

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

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

Χρωμέυ Εντζ Φάιρεξ Σαφάρι Όπερα
69.0 79.0 68.0 14.1 56.0

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

Αναφορά:CSS direction attribute

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

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

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