CSS scroll-snap-align ιδιότητα

Definition and Usage

scroll-snap-align The attribute specifies the position to which the element will snap when you stop scrolling.

To achieve the scroll snap behavior, you must set the attribute on the child elements scroll-snap-align attribute, and set it on the parent element scroll-snap-type ιδιότητα.}

Παράδειγμα

Παράδειγμα 1

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

div {
  scroll-snap-align: center;
}

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

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

scroll-snap-align Η ιδιότητα είναι ιδανική για χρήση σε βιβλιοθήκες εικόνων κύλισης. Εδώ, η κατεύθυνση κύλισης είναι οριζόντια, η μέθοδος αγκύρωσης είναι στο κέντρο. Όταν ο χρήστης αφήσει το τμήμα κύλισης, η πλησιέστερη εικόνα θα αγκυρωθεί στο κέντρο της περιοχής κύλισης. Δοκιμάστε να κάνετε κλικ σε μια εικόνα και να χρησιμοποιήσετε τα πλήκτρα κατεύθυνσης για να τις περιηγηθείτε:

#container > img {
  scroll-snap-align: none center;
}
Πεκίνο Χορεύτης Wuhan Tulip Χανγκτσάου

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

bridge in jungle mountains man with camera Cinque Terre

Παράδειγμα 3: Βαθειακής προσαρμογής της θέσης αγκύρωσης στην κατεύθυνση block

Όταν γίνεται κύλιση κάθετα:scroll-snap-align Η ιδιότητα μπορεί επίσης να οριστεί ως την αρχική θέση στοιχείου στην κατεύθυνση block:

#container > div {
  scroll-snap-align: start none;
}

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

Γλωσσική δομή CSS

scroll-snap-align: none|start|end|center|block inline|initial|inherit;

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

Τιμή Περιγραφή
μηδέν Καμία επίδραση αγκύρωσης κύλισης. Προεπιλεγμένη τιμή.
αρχή Στα άξονες x και y, η αρχική θέση του στοιχείου θα αγκυρώσει κατά την κύλιση.
τέλος Στα άξονες x και y, η τελική θέση του στοιχείου θα αγκυρώσει κατά την κύλιση.
κέντρο Στα άξονες x και y, η κεντρική θέση του στοιχείου θα αγκυρώσει κατά την κύλιση.
block inline Γλωσσική δομή διπλής τιμής. Η πρώτη τιμή καθορίζει τον τρόπο αγκύρωσης στην κατεύθυνση του block, η δεύτερη τιμή καθορίζει τον τρόπο αγκύρωσης στην κατεύθυνση του inline.
initial Αναθέστε αυτή την ιδιότητα στη προεπιλεγμένη της τιμή. Δείτε: initial.
κληρονομικότητα Κληρονομείται αυτή η ιδιότητα από το γονικό στοιχείο. Δείτε: κληρονομικότητα.

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

Προεπιλεγμένη τιμή: μηδέν
Προσέγγιση κληρονομικότητας: όχι
Παραγωγή animation: μη υποστηριζόμενο. Δείτε:Ιδιότητες animation.
Έκδοση: CSS3
Γλώσσα JavaScript: object.style.scrollSnapAlign="start"

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

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 11.0 56.0

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

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