Πλάτος γραμμής κύλισης - CSS-Κόλπα

Anonim

Η scrollbar-widthιδιότητα στο CSS ελέγχει το πλάτος ή το "πάχος" μιας γραμμής κύλισης. scrollbar-widthείναι μέρος του προτύπου 1 της ομάδας εργασίας CSS Scrollbars Module Level 1, το οποίο είναι ακόμη σε εξέλιξη. Η συναίνεση κατά τη στιγμή της σύνταξης αυτού του άρθρου είναι ότι scrollbar-widthείναι πιθανό να συμπεριληφθεί σε μελλοντικές εκδόσεις του CSS, αλλά υπάρχει συζήτηση για το εάν θα επιτρέπεται ένα μεταβλητό όρισμα ή εάν οι επιλογές θα περιοριστούν σε προκαθορισμένες τιμές (περισσότερα για αυτά αργότερα) .

Η προσαρμογή του πλάτους της γραμμής κύλισης είναι ιδιαίτερα σημαντική σε σελίδες ή διεπαφές χρήστη με περιορισμένο χώρο, όπου η περικοπή λίγων εικονοστοιχείων από τη γραμμή κύλισης (ή η κατάργησή της εντελώς) μπορεί να δώσει στο περιεχόμενο αρκετό χώρο για αναπνοή, χωρίς να αφαιρεθεί η δυνατότητα κύλισης.

Για ένα παράδειγμα, φανταστείτε μια διεπαφή επεξεργασίας κειμένου όπου οι ανάγκες να χωρέσουν σε ένα κοντό, στενό κοντέινερ. Σε μια τέτοια περίπτωση, η γραμμή κύλισης μπορεί να καταλάβει μεγάλο μέρος του διαθέσιμου χώρου:

με scrollbar-width: auto;

Με scrollbar-width, μπορούμε να ορίσουμε το πλάτος για thinνα εξοικονομήσουμε χώρο:

.scrollable-element ( scrollbar-width: thin; )
textarea με scrollbar-width: thin;

Ή, μπορούμε να ρυθμίσουμε το πλάτος για noneνα το αφαιρέσουμε εντελώς, εξοικονομώντας ακόμη περισσότερο χώρο (υποθέτοντας ότι είμαστε εντάξει με τη γραμμή κύλισης να εξαφανίζεται):

.scrollable-element ( scrollbar-width: none; )
textareaμε scrollbar-width: none;- και μπορείτε ακόμα να κάνετε κύλιση!

Σύνταξη

scrollbar-width: auto | thin | none | ;

Αξίες

scrollbar-width αποδέχεται τις ακόλουθες τιμές:

  • auto είναι η προεπιλεγμένη τιμή και θα αποδώσει τις τυπικές γραμμές κύλισης για τον πράκτορα χρήστη.
  • thin θα πει στον πράκτορα χρήστη να χρησιμοποιήσει λεπτότερες γραμμές κύλισης, όταν ισχύει.
  • none θα κρύψει εντελώς τη γραμμή κύλισης, χωρίς να επηρεάζεται η δυνατότητα κύλισης του στοιχείου.
  • συζητείται, αλλά (εάν προστεθεί) θα ήταν το μέγιστο πλάτος της γραμμής κύλισης.

Παράδειγμα

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

Αυτό είναι για τη συνολική δυνατότητα προσαρμογής των γραμμών κύλισης. Για το καλύτερο στοίχημά σας, διαμορφώστε ένα πρόγραμμα περιήγησης με γραμμή κύλισης, δείτε εδώ.

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.

Επιφάνεια εργασίας

Χρώμιο Firefox ΙΕ Ακρη Σαφάρι
91 * 87 11 88 * TP *

Κινητό / Tablet

Android Chrome Android Firefox Android iOS Safari
88 * Οχι 81 * 14.0-14.4 *

Σχετιζομαι με

  • scrollbar-gutter
  • scrollbar-color
  • scrollbar

Πόροι

  • Πρόχειρο CSSWG Scrollbars Module
  • Συλλογή W3C για περιπτώσεις χρήσης για τροποποίηση της γραμμής κύλισης
  • Το μέλλον του CSS: Γραμμές κύλισης στο dev.to
  • w3c Συζήτηση Github για έλεγχο πλάτους γραμμής κύλισης