CSS περιθώριο-συμπεριφοράς-περισκόπησης

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

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

Αυτό σημαίνει ότι όταν σταματήσετε την κύλιση, η κύλιση θα προσαρμοστεί γρήγορα και θα σταματήσει στη θέση προσκολλητικής τοποθεσίας (snap position) και στη διαφορά απόσταση με το κουτί που καθορίζεται.

Η θέση προσκολλητικής τοποθεσίας είναι η θέση στην οποία το υποσύνολο στο τέλος της σειράς κύλισης προσκολληθεί στο κουτί.

scroll-margin Η ιδιότητα είναι συντομευμένη για τις παρακάτω ιδιότητες:

scroll-margin Οι τιμές της ιδιότητας μπορούν να οριστούν με διάφορους τρόπους:

Εάν η ιδιότητα scroll-margin έχει τέσσερις τιμές:

scroll-margin: 15px 30px 60px 90px;
  • Η απόσταση από το πάνω είναι 15px
  • Η απόσταση από την δεξιά πλευρά είναι 30px
  • Η απόσταση από το κάτω είναι 60px
  • Η απόσταση από την αριστερή πλευρά είναι 90px

Εάν η ιδιότητα scroll-margin έχει τρεις τιμές:

scroll-margin: 15px 30px 60px;
  • Η απόσταση από το πάνω είναι 15px
  • οι αποστάσεις στα δύο πλευρά είναι 30px
  • Η απόσταση από το κάτω είναι 60px

Εάν η ιδιότητα scroll-margin έχει δύο τιμές:

scroll-margin: 15px 30px;
  • οι αποστάσεις στην κορυφή και στο κάτω μέρος είναι 15px
  • οι αποστάσεις στα δύο πλευρά είναι 30px

Αν η ιδιότητα scroll-margin έχει μια τιμή:

scroll-margin: 10px;
  • οι αποστάσεις στις τέσσερις κατευθύνσεις είναι 10px

για να δείτε scroll-margin ιδιότητες στο γονικό στοιχείο scroll-margin και scroll-snap-align ιδιότητα, και πρέπει να οριστεί scroll-snap-type ιδιότητα.

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

Παράδειγμα

Παράδειγμα 1

Ρύθμιση της περιθαλάσσιας απόκλισης μεταξύ της θέσης αγκύρα και του κουτιού σε 20px:

div {
  scroll-margin: 20px;
}

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

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

scroll-margin Η ιδιότητα μπορεί να χρησιμοποιηθεί σε βιβλιοθήκες εικόνων με συμπεριφορά πλαισίου.scroll-margin Για να μπορεί ο χρήστης να δει ότι υπάρχει και μια άλλη εικόνα στα αριστερά. Όταν κινείται πάνω από την πρώτη εικόνα, μπορεί να δει την επίδραση:

#container > img {
  scroll-margin: 0 0 0 30px;
}
Πεκίνο Χορευτής Wuhan Tulip Χάνατςου

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

Παράδειγμα 3: Ρύθμιση της περιθαλάσσιας απόκλισης κάτω και δεξιά

μπορεί να ρυθμιστεί στο κάτω μέρος και στο δεξί μέρος του στοιχείου scroll-margin Ιδιότητα. Όταν ο χρήστης κινείται οριζόντια και κάθετα προς τον επόμενο στοιχείο, μπορεί να δει την επίδραση:

#container > div {
  scroll-margin: 0 10px 30px 0;
}





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

Γλώσσα CSS

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

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

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

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

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

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

Προεπιλεγμένη τιμή: 0
Κληρονομικότητα: όχι
Ανίμαση: μη υποστηριζόμενο. Δείτε:Αξιώματα αニμασίας.
Έκδοση: CSS3
Γλώσσα JavaScript: object.style.scrollMargin="20px"

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

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

Chrome Edge Firefox Safari Opera
69.0 79.0 90.0 14.1 56.0

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

παραδείγματα:Η ιδιότητα scroll-margin-bottom του CSS

παραδείγματα:Η ιδιότητα scroll-margin-left του CSS

παραδείγματα:Η ιδιότητα scroll-margin-right του CSS

παραδείγματα:Η ιδιότητα scroll-margin-top του CSS

παραδείγματα:Η ιδιότητα scroll-snap-align του CSS

παραδείγματα:Η ιδιότητα scroll-snap-type του CSS