Η scrollbar-gutterιδιότητα παρέχει ευελιξία για τον προσδιορισμό του χώρου που χρησιμοποιεί το πρόγραμμα περιήγησης για την εμφάνιση μιας γραμμής κύλισης που αλληλεπιδρά με το περιεχόμενο στην οθόνη. Οι προδιαγραφές το περιγράφουν «κράτημα χώρου για τη γραμμή κύλισης» και αυτό έχει νόημα, καθώς αυτό είναι τελικά ένα υδρορροή: ένα δοχείο που διατηρεί χώρο για ό, τι υπάρχει σε αυτό και το χωρίζει από άλλα στοιχεία.
Είμαστε λοιπόν όλοι στην ίδια σελίδα, μια γραμμή κύλισης είναι αυτό που συνήθως βρίσκεται στη δεξιά πλευρά του προγράμματος περιήγησης (αναφέρεται επίσημα ως "πράκτορας χρήστη" - ή UA - στην προδιαγραφή) που δείχνει τη θέση κύλισης σε σχέση με το σύνολο διαθέσιμος χώρος στην ιστοσελίδα.
Αυτά παραδοσιακά ήταν ένα οπτικό δοχείο με συρόμενο δείκτη. Αυτά αναφέρονται ως κλασικές γραμμές κύλισης . Η ένδειξη κάθεται στο εσωτερικό της υδρορροής και η υδρορροή καταλαμβάνει φυσική ακίνητη περιουσία στην οθόνη όταν εμφανίζεται.
Τον τελευταίο καιρό όμως, οι εμφανίσεις της γραμμής κύλισης τείνουν προς κάτι πολύ πιο ελάχιστο. Ονομάζουμε αυτές τις γραμμές κύλισης επικάλυψης και είναι είτε μερικώς είτε πλήρως διαφανείς ενώ κάθεται στο πάνω μέρος του περιεχομένου της σελίδας. Με άλλα λόγια, σε αντίθεση με τις κλασικές γραμμές κύλισης που καταλαμβάνουν τα φυσικά ακίνητα στην οθόνη, οι γραμμές κύλισης επικάλυψης βρίσκονται στο πάνω μέρος του περιεχομένου της οθόνης.
Ενώ είμαστε σε αυτό, οι γραμμές κύλισης μπορούν να εμφανιστούν σε άλλα μέρη. Εκτός από την ένταση στα δεξιά του προγράμματος περιήγησης, θα δείτε γραμμές κύλισης σε στοιχεία HTML όπου το περιεχόμενο ξεχειλίζει από το στοιχείο και η overflowιδιότητα (ή overflow-xκαι overflow-y) έχει οριστεί στην scrollτιμή. Και σημειώστε ότι η ύπαρξη overflow-xμέσων έχουμε οριζόντια κύλιση εκτός από την κάθετη κύλιση.
Για αυτό μιλάμε. Όχι ο ίδιος ο δείκτης, αλλά ο περιέκτης που τον κρατά. Αυτό είναι το υδρορροή. Το αν ένα πρόγραμμα περιήγησης χρησιμοποιεί μια κλασική γραμμή ή μια γραμμή κύλισης επικάλυψης εξαρτάται πλήρως από το ίδιο το UA. Αυτό δεν είναι για εμάς να αποφασίσουμε. Αυτό ισχύει για το πλάτος της γραμμής κύλισης. Ο πράκτορας χρήστη το ορίζει αυτό και δεν μας δίνει κανέναν έλεγχο σε αυτό.
Εκεί scrollbar-gutterμπαίνει. Μπορούμε να διευκρινίσουμε εάν το υδρορροή υπάρχει σε κλασικές και παραλλαγές επικάλυψης.
Σύνταξη
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )Ένα διπλό συμπλεκτικό σήμα (&&) διαχωρίζει δύο ή περισσότερα στοιχεία, όλα πρέπει να συμβαίνουν, με οποιαδήποτε σειρά.
Ένα ερωτηματικό (?) Υποδεικνύει ότι ο προηγούμενος τύπος, λέξη ή ομάδα είναι προαιρετικός (εμφανίζεται μηδέν ή μία φορά).
Αξίες
auto(αρχική τιμή): Σχεδόν η προεπιλεγμένη συμπεριφορά που περιγράφεται μέχρι τώρα Ο ορισμός της ιδιότητας σε αυτήν την τιμή επιτρέπει στις κλασικές γραμμές κύλισης να καταναλώνουν ακίνητη περιουσία στη διεπαφή χρήστη σε στοιχεία όπου ηoverflowιδιότητα αυτών των στοιχείων έχει οριστείscrollήauto. Αντίθετα, οι γραμμές κύλισης επικάλυψης δεν καταλαμβάνουν καθόλου καθισμένοι στην κορυφή του στοιχείου.stable: Αυτό προσθέτει μια μικρή συμπεριφορά με εκτίμηση, διατηρώντας πάντα χώρο για την υδρορροή της γραμμής κύλισης, εφ 'όσον ηoverflowιδιότητα στο ίδιο στοιχείο έχει ρυθμιστείscrollήautoκαι αντιμετωπίζουμε μια κλασική γραμμή κύλισης - ακόμα και όταν το πλαίσιο δεν ξεχειλίζει. Αντίθετα, αυτό δεν θα έχει αντίκτυπο στη γραμμή κύλισης επικάλυψης.always: Αυτό λειτουργεί το ίδιο,stableαλλά διασφαλίζει ότι διατηρείται πάντα χώρος για το υδρορροή της γραμμής κύλισης, ανεξάρτητα από το αν η γραμμή κύλισης είναι κλασική ή επικάλυψη και ανεξάρτητα από το εάν το περιεχόμενο υπερχειλίζει ή όχι.both: Αυτό δηλώνει ότι μια υδρορροή γραμμής κύλισης θα τοποθετηθεί και στις δύο πλευρές του στοιχείου όταν εμφανίζεται η προεπιλεγμένη υδρορροή. Μπορείτε να δείτε πώς αυτό μπορεί να είναι χρήσιμο εάν το σχέδιό σας απαιτεί ίσες αποστάσεις και στις δύο πλευρές του στοιχείου.force: Αυτό είναι το ίδιο με την εφαρμογή τόσοstableκαιalwaysόπου το στοιχείο πουoverflowέχει οριστεί σεauto,scroll,visible,hiddenήclip.
Το Προσχέδιο Εργασίας των προδιαγραφών έχει έναν εξαιρετικά εύχρηστο πίνακα που χωρίζει αυτούς τους ορισμούς στα περιβάλλοντά τους για να δείξει τη σχέση που έχουν με τις κλασικές και επικαλυπτόμενες γραμμές κύλισης.
| Κλασικές γραμμές κύλισης | Επικάλυψη γραμμών κύλισης | ||||
|---|---|---|---|---|---|
| ξεχείλισμα | γραμμή κύλισης-υδρορροή | Ξέχειλος | Δεν ξεχειλίζει | Ξέχειλος | Δεν ξεχειλίζει |
| πάπυρος | αυτο | σολ | σολ | ||
| σταθερός | GM | σολ | |||
| πάντα | σολ | σολ | σολ | σολ | |
| αυτο | σολ | ||||
| σταθερός | σολ | σολ | |||
| πάντα | σολ | σολ | σολ | σολ | |
| ορατό, κρυφό, κλιπ | αυτο | ||||
| σταθερός | φά? | φά? | |||
| πάντα | φά? | φά? | φά? | φά? | |
Το "G" αντιπροσωπεύει περιπτώσεις όπου υπάρχει χώρος για την υδρορροή της γραμμής κύλισης, "f?" περιπτώσεις όπου ο χώρος είναι δεσμευμένος για το υδρορροή της γραμμής κύλισης, εάν έχει καθοριστεί δύναμη, και κενά κελιά περιπτώσεις όπου δεν υπάρχει δεσμευμένος χώρος.
Κατάσταση προδιαγραφών
Η scrollbar-gutterιδιότητα ορίζεται στο Επίπεδο 4 της ενότητας υπερχείλισης, το οποίο βρίσκεται σε κατάσταση προσχέδιο εργασίας. Αυτό σημαίνει ότι αυτό είναι ακόμη ένα έργο σε εξέλιξη και θα μπορούσε να αλλάξει από τώρα έως τη στιγμή που το σχέδιο μετακινείται στη Σύσταση υποψηφίων.
Η προδιαγραφή Επίπεδο 3 της Ενότητας Υπερχείλισης είναι επίσης ένα Προσχέδιο Εργασίας, οπότε αυτό είναι μια καλή ένδειξη ότι (1) θα χρειαστεί λίγος χρόνος για scrollbar-gutterνα γίνει σύσταση και (2) είναι ακόμη πολύ σε εξέλιξη.
Υποστήριξη προγράμματος περιήγησης
Δεν υπάρχει υποστήριξη προγράμματος περιήγησης τη στιγμή της τελευταίας ενημέρωσης.
Περισσότερες πληροφορίες
- Πρόχειρο CSS Overflow Module Level 4 Draft
- Τεύχος GitHub # 92
- Η ομάδα εργασίας CSS στο TPAC: Τι νέο υπάρχει στο CSS; Συμπεριλαμβανομένης μιας χειρόγραφης πρότασης για τον πίνακα που περιγράφει τη συμπεριφορά των τιμών ιδιοκτησίας.