Θέλω να προσαρμόσω μια γραμμή κύλισης με CSS.
Χρησιμοποιώ αυτόν τον κώδικα WebKit CSS, ο οποίος λειτουργεί καλά για το Safari και το Chrome:
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-track-piece {
background-color: #C2D2E4;
}
::-webkit-scrollbar-thumb:vertical {
height: 30px;
background-color: #0A4C95;
}
Πώς μπορώ να κάνω το ίδιο πράγμα στον Firefox;
Ξέρω ότι μπορώ εύκολα να το κάνω χρησιμοποιώντας jQuery, αλλά θα προτιμούσα να το κάνω με καθαρό CSS αν είναι εφικτό.
Θα ήμουν ευγνώμων για τη συμβουλή κάποιου ειδικού!
Από τα τέλη του 2018, υπάρχει πλέον περιορισμένη δυνατότητα προσαρμογής στον Firefox!
Δείτε αυτές τις απαντήσεις:
Και αυτό για πληροφορίες: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109
Δεν υπάρχει ισοδύναμο του Firefox για το ::-webkit-scrollbar
και τους φίλους του.
Θα πρέπει να μείνετε με την JavaScript.</strike>,
Πολλοί άνθρωποι θα ήθελαν αυτό το χαρακτηριστικό, βλέπε: https://bugzilla.mozilla.org/show_bug.cgi?id=77790
Όσον αφορά τις αντικαταστάσεις JavaScript, μπορείτε να δοκιμάσετε:
Σκέφτηκα να μοιραστώ τα ευρήματά μου σε περίπτωση που κάποιος σκέφτεται ένα plugin JQuery για να κάνει τη δουλειά.
Έδωσα JQuery Custom Scrollbar ένα go. Είναι αρκετά φανταχτερό και κάνει κάποια ομαλή κύλιση (με αδράνεια κύλισης) και έχει πολλές παραμέτρους που μπορείτε να ρυθμίσετε, αλλά κατέληξε να είναι λίγο πολύ εντατική CPU για μένα (και προσθέτει ένα δίκαιο ποσό στο DOM).
Τώρα δίνω μια ευκαιρία στο Perfect Scrollbar. Είναι απλό και ελαφρύ (6KB) και κάνει αξιοπρεπή δουλειά μέχρι στιγμής. Δεν's CPU εντατική σε όλα (όσο μπορώ να πω) και προσθέτει πολύ λίγο στο DOM σας. Έχει μόνο μερικές παραμέτρους για να ρυθμίσετε (wheelSpeed και wheelPropagation), αλλά είναι το μόνο που χρειάζομαι και χειρίζεται τις ενημερώσεις του περιεχομένου κύλισης όμορφα (όπως η φόρτωση εικόνων).
Υ.Γ. Έριξα μια γρήγορη ματιά στο JScrollPane, αλλά ο @simone έχει δίκιο, είναι λίγο ξεπερασμένο τώρα και ένα PITA.
Λειτουργεί σε στυλ χρήστη και φαίνεται ότι δεν λειτουργεί σε ιστοσελίδες. Δεν έχω βρει επίσημες οδηγίες από τη Mozilla σχετικά με αυτό. Αν και μπορεί να έχει λειτουργήσει σε κάποιο σημείο, ο Firefox δεν έχει επίσημη υποστήριξη για αυτό. Αυτό το σφάλμα είναι ακόμα ανοιχτό https://bugzilla.mozilla.org/show_bug.cgi?id=77790
scrollbar {
/* clear useragent default style*/
-moz-appearance: none !important;
}
/* buttons at two ends */
scrollbarbutton {
-moz-appearance: none !important;
}
/* the sliding part*/
thumb{
-moz-appearance: none !important;
}
scrollcorner {
-moz-appearance: none !important;
resize:both;
}
/* vertical or horizontal */
scrollbar[orient="vertical"] {
color:silver;
}
ελέγξτε το http://codemug.com/html/custom-scrollbars-using-css/ για λεπτομέρειες.