Η overflow-anchorιδιότητα μας δίνει τη δυνατότητα να εξαιρεθούμε από το Scroll Anchoring, το οποίο είναι μια δυνατότητα προγράμματος περιήγησης που αποσκοπεί στο να επιτρέψει τη φόρτωση περιεχομένου πάνω από την τρέχουσα τοποθεσία DOM του χρήστη χωρίς να αλλάξει την τοποθεσία του χρήστη μόλις φορτωθεί πλήρως αυτό το περιεχόμενο.
Γιατί το χρειαζόμαστε
Το Scroll Anchoring είναι μια δυνατότητα προγράμματος περιήγησης που προσπαθεί να αποτρέψει μια κοινή κατάσταση όπου μπορείτε να πραγματοποιήσετε κύλιση προς τα κάτω σε μια ιστοσελίδα προτού το DOM φορτωθεί πλήρως και, όταν συμβαίνει, τυχόν στοιχεία που φορτώνουν πάνω από την τρέχουσα τοποθεσία σας σπρώχνουν πιο κάτω τη σελίδα.
Είναι λογικό γιατί θα συνέβαινε αυτό. Υπάρχουν ιδιότητες CSS που εφαρμόζουμε σε στοιχεία που τους δίνουν μέγεθος (π.χ. width), σχήμα (π.χ. transform) και θέση (π.χ. margin). Εάν αυτά τα στοιχεία δεν έχουν φορτωθεί μέχρι να πραγματοποιήσουμε κύλιση προς τα κάτω στη σελίδα, το DOM θα συνεχίσει να τα φορτώνει ακόμα κι αν βρίσκονται εκτός της τρέχουσας θύρας προβολής και θα επεκταθεί φυσικά για να δημιουργηθεί χώρος για αυτά τα πρόσφατα φορτωμένα στοιχεία. Καθώς μεγαλώνει το DOM, η θέση μας στη σελίδα αλλάζει για να προσαρμόσει αυτά τα στοιχεία.
Το Scroll Anchoring αποτρέπει αυτήν την εμπειρία "άλματος" κλειδώνοντας τη θέση του χρήστη στη σελίδα ενώ πραγματοποιούνται αλλαγές στο DOM πάνω από την τρέχουσα τοποθεσία. Αυτό επιτρέπει στο χρήστη να παραμείνει αγκυροβολημένο όπου βρίσκεται στη σελίδα, ακόμη και όταν φορτώνονται νέα στοιχεία στο DOM.
Η overflow-anchorιδιότητα μας επιτρέπει να εξαιρεθούμε από τη δυνατότητα αγκύρωσης κύλισης σε περίπτωση που προτιμάται να επιτρέπεται η εκ νέου ροή του περιεχομένου καθώς φορτώνονται στοιχεία.
Σύνταξη
article ( overflow-anchor: (auto | none ); )Αξίες
Η overflow-anchorιδιότητα δέχεται δύο τιμές που ουσιαστικά εναλλάσσουν εάν η δυνατότητα είναι ενεργοποιημένη ή όχι.
auto(προεπιλογή): Ενεργοποιεί την αγκύρωση κύλισης στο τμήμα της σελίδας ή στο στοιχείο στο οποίο εφαρμόζεται.none: Απενεργοποιεί την αγκύρωση κύλισης εν μέρει ή ολόκληρη μια ιστοσελίδα ή εξαιρεί τμήματα του DOM από την αγκύρωση, επιτρέποντας στο περιεχόμενο να επανατοποθετηθεί.
Πιθανότατα να το εφαρμόσετε στο body, αλλά μπορείτε να το βάλετε σε οποιονδήποτε επιλογέα και θα τεθεί σε ισχύ εάν το στοιχείο μετακινηθεί.
Διαδήλωση
Σε αυτήν την επίδειξη, μόλις κάνετε κύλιση σε ένα από τα πλαίσια, θα προσθέσει μια δέσμη πράσινων κουτιών στην κορυφή αυτού του div. Κανονικά αυτό θα ωθούσε αμέσως το περιεχόμενο, ενδεχομένως να είναι μια τεράστια απόσπαση της προσοχής και να χάσει τη θέση σας στο κείμενο. Με overflow-anchor: auto;, διατηρείται η θέση κύλισης. overflow-anchor: none;επιτρέπει στα νέα εισαγόμενα div να επηρεάσουν τη θέση κύλισης.
Δείτε το Pen overflow-anchor του Chris Coyier (@chriscoyier) στο CodePen.
Ένα άλλο πράγμα που μπορεί να γίνει που μπορεί να είναι εξαιρετικά duper χρήσιμο είναι να καρφιτσώσετε τη θέση κύλισης ενός στοιχείου προς τα κάτω. Έτσι, για παράδειγμα, μια εφαρμογή συνομιλίας όπου νέα μηνύματα προσαρτώνται στο DOM στο κάτω μέρος και θέλετε η θέση κύλισης να παραμείνει στο κάτω μέρος με όλα τα νέα μηνύματα:
Δείτε το στυλό
"Μείνετε στο κάτω μέρος" με κύλιση-άγκυρα από τον Chris Coyier (@chriscoyier)
στο CodePen.
Υποστήριξη προγράμματος περιήγησης
Από αυτό το γράψιμο, overflow-anchorδεν είναι ένα τρέχον Πρότυπο W3C, αν και το προσχέδιο έκθεσης της προτεινόμενης προδιαγραφής είναι διαθέσιμο για ανάγνωση και έχει υιοθετηθεί από το Chrome από την Έκδοση 56. Η Mozilla εξετάζει παρόμοιο χαρακτηριστικό στον Firefox. Καθώς περισσότερα προγράμματα περιήγησης υιοθετούν τη δυνατότητα Scroll Anchoring, ενδέχεται να περιμένουμε να δούμε περισσότερη υποστήριξη του προγράμματος περιήγησης, overflow-anchorδεδομένου ότι παρέχει ρητό έλεγχο για να εξαιρεθείτε από τη λειτουργία.
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 56 | 66 | Οχι | 79 | Οχι |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Οχι |
Περισσότερες πληροφορίες
- Scroll Anchoring: Προτεινόμενο προσχέδιο της προδιαγραφής Scroll Anchoring
- Chromium Blog: Η ανάρτηση ιστολογίου που ανακοινώνει ότι η Chrome συμπεριλαμβάνει το Scroll Anchoring και την ιδιότητα CSS στην Έκδοση 56
- Εισιτήριο Bugzilla # 43114: Ανοίξτε το εισιτήριο για να συμπεριλάβετε την ιδιοκτησία στον Firefox