Chcę dostosować pasek przewijania za pomocą CSS.
Używam tego kodu CSS WebKit, który działa dobrze w Safari i Chrome:
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-track-piece {
background-color: #C2D2E4;
}
::-webkit-scrollbar-thumb:vertical {
height: 30px;
background-color: #0A4C95;
}
Jak mogę zrobić to samo w przeglądarce Firefox?
Wiem, że mogę to łatwo zrobić za pomocą jQuery, ale wolałbym to zrobić z czystym CSS, jeśli jest to wykonalne.
Byłbym wdzięczny za czyjąś radę!
Odpowiedzi:
Pod koniec 2018 r. W Firefoksie dostępna jest teraz ograniczona personalizacja!
Zobacz te odpowiedzi:
A to dla informacji w tle: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109
Nie ma odpowiednika Firefox::-webkit-scrollbar
i znajomych.Musisz trzymać się JavaScript.Wiele osób chciałoby tej funkcji, patrz: https://bugzilla.mozilla.org/show_bug.cgi?id=77790
Jeśli chodzi o zamiany JavaScript, możesz spróbować:
źródło
-moz-appearance
może pomóc."The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme."
- dostaniesz natywny pasek przewijania.Firefox 64 dodaje wsparcie dla spec projektu CSS modułu Paski przewijania Level 1 , która dodaje dwie nowe właściwości z
scrollbar-width
iscrollbar-color
które dają pewną kontrolę nad tym, jak są wyświetlane paski przewijania.Możesz ustawić
scrollbar-color
jedną z następujących wartości (opisy z MDN):auto
Domyślne renderowanie platformy dla części ścieżkowej paska przewijania, przy braku innych powiązanych właściwości koloru paska przewijania.dark
Pokaż ciemny pasek przewijania, który może być albo ciemnym wariantem paska przewijania udostępnianego przez platformę, albo niestandardowym paskiem przewijania o ciemnych kolorach.light
Pokaż jasny pasek przewijania, który może być albo lekkim wariantem paska przewijania udostępnianym przez platformę, albo niestandardowym paskiem przewijania o jasnych kolorach.<color>
<color>
Stosuje pierwszy kolor do kciuka paska przewijania, drugi do ścieżki paska przewijania.Pamiętaj, że
dark
ilight
wartości nie są obecnie zaimplementowane w Firefoksie .uwagi na macOS:
Automatycznie ukrywające się półprzezroczyste paski przewijania, które są domyślne dla systemu macOS, nie mogą być kolorowane za pomocą tej reguły (nadal wybierają własny kontrastowy kolor na podstawie tła). Tylko stale wyświetlane paski przewijania (Preferencje systemowe> Pokaż paski przewijania> Zawsze) są kolorowe.
Demo wizualne:
Pokaż fragment kodu
Możesz ustawić
scrollbar-width
jedną z następujących wartości (opisy z MDN):auto
Domyślna szerokość paska przewijania dla platformy.thin
Cienki wariant szerokości paska przewijania na platformach, które zapewniają tę opcję, lub cieńszy pasek przewijania niż domyślna szerokość paska przewijania platformy.none
Nie pokazano paska przewijania, jednak element nadal będzie można przewijać.Możesz również ustawić określoną wartość długości, zgodnie ze specyfikacją. Zarówno
thin
konkretna długość, jak i konkretna długość mogą nie działać na wszystkich platformach, a to, co dokładnie robi, zależy od platformy. W szczególności Firefox nie obsługuje obecnie określonej wartości długości ( ten komentarz na temat śledzenia błędów wydaje się to potwierdzać ).thin
Keywork wydaje się być dobrze obsługiwany jednak z MacOS i wsparcia systemu Windows przy-najmniej.Prawdopodobnie warto zauważyć, że opcja wartości długości i cała
scrollbar-width
właściwość są rozważane do usunięcia w przyszłej wersji roboczej, a jeśli tak się stanie, ta konkretna właściwość może zostać usunięta z przeglądarki Firefox w przyszłej wersji.Demo wizualne:
Pokaż fragment kodu
źródło
Czy mogę zaoferować alternatywę?
Żadnych skryptów, tylko znormalizowane style css i trochę kreatywności. Krótka odpowiedź - maskowanie części istniejącego paska przewijania przeglądarki, co oznacza, że zachowałeś całą jego funkcjonalność.
Aby zobaczyć demo i nieco bardziej szczegółowe wyjaśnienia, sprawdź tutaj ...
jsfiddle.net/aj7bxtjz/1/
źródło
Pomyślałem, że podzielę się swoimi odkryciami na wypadek, gdyby ktoś rozważał wykonanie wtyczki JQuery.
Dałem JQuery Custom Scrollbar . Jest dość fantazyjny i wykonuje płynne przewijanie (z przewijaniem bezwładności) i ma mnóstwo parametrów, które można dostosować, ale skończyło się to dla mnie zbyt dużym obciążeniem procesora (i dodaje sporo DOM).
Teraz wypuszczam Perfect Scrollbar . Jest prosty i lekki (6 KB) i do tej pory wykonuje przyzwoitą robotę. W ogóle nie jest to procesor intensywny (o ile wiem) i bardzo niewiele dodaje do twojego DOM. Ma tylko kilka parametrów do poprawienia (wheelSpeed i wheelPropagation), ale to wszystko, czego potrzebuję i ładnie obsługuje aktualizacje przewijanej zawartości (takie jak ładowanie zdjęć).
PS Rzuciłem okiem na JScrollPane, ale @simone ma rację, jest teraz trochę przestarzały i PITA.
źródło
Od wersji Firefox 64 możliwe jest użycie nowych specyfikacji dla prostego stylu paska przewijania ( nie tak kompletnego jak w Chrome z prefiksami dostawcy ).
W tym przykładzie można zobaczyć rozwiązanie, które łączy różne reguły dotyczące przeglądarki Firefox i Chrome z podobnym (nie równym) wynikiem końcowym (na przykład użyj oryginalnych reguł Chrome):
Kluczowe zasady to:
Dla przeglądarki Firefox
Dla Chrome
Pamiętaj, że w odniesieniu do Twojego rozwiązania można również stosować prostsze reguły Chrome, takie jak:
Wreszcie, aby ukryć strzałki na paskach przewijania również w przeglądarce Firefox, obecnie konieczne jest ustawienie go jako „ cienkiego ” zgodnie z następującą regułą
scrollbar-width: thin;
źródło
Rok 2020 to działa
https://github.com/Aris-t2/CustomCSSforFx/issues/160
źródło
Działa w stylu użytkownika i wydaje się, że nie działa na stronach internetowych. Nie znalazłem oficjalnego kierunku w tej sprawie od Mozilli. Chociaż w pewnym momencie mogło to zadziałać, Firefox nie ma na to oficjalnego wsparcia. Ten błąd jest nadal otwarty https://bugzilla.mozilla.org/show_bug.cgi?id=77790
sprawdź http://codemug.com/html/custom-scrollbars-using-css/ w celu uzyskania szczegółowych informacji.
źródło
źródło