Η scroll-behaviorιδιότητα στο CSS μας επιτρέπει να καθορίσουμε εάν η θέση κύλισης του προγράμματος περιήγησης μεταβαίνει σε μια νέα θέση ή κινείται ομαλά στη μετάβαση όταν ένας χρήστης κάνει κλικ σε έναν σύνδεσμο που στοχεύει σε μια αγκυρωμένη θέση μέσα σε ένα πλαίσιο κύλισης.
html ( scroll-behavior: smooth; )Βαθύτερη εξήγηση
Περιμένετε, περιμένετε, για ποιο λόγο αυτό το κύλισης μιλάμε; Είναι ένα στοιχείο με περιεχόμενο που ξεχειλίζει τα όριά του.
Δείτε το Pen Scrolling Box από CSS-Tricks (@ css-tricks) στο CodePen.
Παρατηρήστε πώς το πλαίσιο στο παραπάνω demo έχει σταθερό ύψος 200px; Κάθε περιεχόμενο που υπερβαίνει αυτό το ύψος βρίσκεται εκτός των ορίων του πλαισίου και έχουμε προσθέσει overflow-y: scrollγια να κάνουμε αυτό το πρόσθετο περιεχόμενο προσβάσιμο με κάθετη κύλιση. Αυτό εννοούμε με ένα πλαίσιο κύλισης.
Τώρα ας πούμε ότι προσθέτουμε μια πλοήγηση στην κορυφή του πλαισίου με κάθε σύνδεσμο που στοχεύει τις τρεις ενότητες περιεχομένου:
Ανατρέξτε στο Pen Scrolling Box w / Nav by CSS-Tricks (@ css-tricks) στο CodePen.
Κάθε σύνδεσμος μεταφέρει τον χρήστη απευθείας στις διάφορες ενότητες περιεχομένου στο πλαίσιο κύλισης. Από προεπιλογή, αυτή η μετάβαση μεταξύ είναι ένα απότομο άλμα.
Ένα τέτοιο άλμα μπορεί να είναι τρομακτικό. Εκεί scroll-behaviorμπαίνει και μας επιτρέπει να ορίσουμε μια ομαλή μετάβαση κύλισης. Κάτι τέτοιο χρησιμοποιούσε φανταχτερό Javascript αλλά scroll-behaviorθα μας δώσει τη δυνατότητα να το κάνουμε αυτό εγγενώς στο CSS, μόλις βελτιωθεί η υποστήριξη του προγράμματος περιήγησης.
Σύνταξη
.module ( scroll-behavior: ( auto | smooth ); )Αξίες
Η scroll-behaviorιδιότητα δέχεται δύο τιμές, οι οποίες ουσιαστικά ενεργοποιούν και απενεργοποιούν τη λειτουργία ομαλής κύλισης.
auto(προεπιλογή): Αυτή η τιμή επιτρέπει την απότομη μετάβαση μεταξύ των στοιχείων στο πλαίσιο κύλισης.smooth: Αληθινή στο όνομά της, αυτή η τιμή είναι η ομαλή μετάβαση κίνησης μεταξύ στοιχείων στο πλαίσιο κύλισης.
Διαδήλωση
Η ακόλουθη επίδειξη θα λειτουργεί μόνο στα Chrome 61+, Firefox 36+ και Opera 48+ κατά τη στιγμή αυτής της γραφής.
Ανατρέξτε στο Pen Scrolling Box w / `scroll-behavior` από CSS-Tricks (@ css-tricks) στο CodePen.
Υποστήριξη προγράμματος περιήγησης
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 61 | 36 | Οχι | 79 | Οχι |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Οχι |
Περισσότερες πληροφορίες
- Ενότητα προβολής CSSOM: Το προσχέδιο προδιαγραφής, συμπεριλαμβανομένης της ιδιότητας CSS. Το τρέχον προσχέδιο περιλαμβάνει μια πρόταση για τη μετάβαση
scroll-behaviorσε άλλη προδιαγραφή, οπότε θα είναι ενδιαφέρον να δούμε πού προσγειώνεται. - Δίκτυο προγραμματιστών Mozilla: Η αναφορά MDN για τις προδιαγραφές
- Κατάσταση Microsoft Edge Platform: Προς το παρόν εμφανίζει την κατάσταση αυτής της δυνατότητας ως υπό εξέταση
- Κατάσταση πλατφόρμας Chrome: Προς το παρόν εμφανίζει την κατάσταση αυτής της λειτουργίας ως Αναπτυξιακή και περιλαμβάνει καταστάσεις για άλλες πλατφόρμες ως κατά μέρος
- Smooth Scrolling Snippet: Snippets για ενεργοποίηση της ομαλής κύλισης με Javascript και jQuery
- Ομαλή κύλιση και προσβασιμότητα: Μια ανάρτηση CSS-Tricks σχετικά με την επίδραση της ομαλής κύλισης με δυνατότητα Javascript