Niestandardowy pasek przewijania CSS dla przeglądarki Firefox

313

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ę!

Dimitri Vorontzov
źródło
1
Podziel się, jak możesz to zrobić za pomocą jQuery. Mam do czynienia z tym samym problemem, ale użyłem CSS, aby go naprawić w Webkit. Jednak Firefox stanowi problem, z którym może pomóc twoje rozwiązanie jQuery.
iGbanam
1
Polecam użycie wtyczki jscrollpane jQuery.
Dimitri Vorontzov
Występuje problem z jScrollPane w Firefoksie. jScrollPane działa idealnie w Chrome, ale w Firefox masz pusty systemowy pasek przewijania po prawej stronie paska przewijania jScrollPane. Powinien być tylko jeden pasek przewijania
iGbanam
1
Nie prawda. Jeśli tak, to zrobiłeś coś złego.
Dimitri Vorontzov,
Zobacz moją odpowiedź tutaj: stackoverflow.com/questions/7357203/custom-scrollbars/...
Buzinas,

Odpowiedzi:

239

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-scrollbari 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ć:

trzydzieści
źródło
2
Dziękuję, ThirtyDot. Jedno pytanie: co z -moz-wygląd: scrollbartrack-vertical - i innymi powiązanymi rozszerzeniami CSS? Być może można je w jakiś sposób wykorzystać?
Dimitri Vorontzov
2
Nie. Niestety, żadna z możliwych wartości dla nie -moz-appearancemoż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.
thirtydot
15
Na wszelki wypadek, gdyby ktoś czytający ten artykuł potrzebował praktycznego rozwiązania, skorzystałem z wtyczki jscrollpane jQuery.
Dimitri Vorontzov
1
@JacquesMathieu, rozumiem, co masz na myśli. Mimo że nie jest to wina Barona, jeśli pobiorę stronę i zapobiegnę inicjalizacji barona, błąd nadal występuje. Wygląda więc na to, że to wina Chrome.
thephpdev,
3
drafts.csswg.org/css-scrollbars-1 jest początkiem pierwszego etapu specyfikacji, ale jest domyślnie włączony w Firefoksie Nightly.
węgry
53

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-widthi scrollbar-colorktóre dają pewną kontrolę nad tym, jak są wyświetlane paski przewijania.

Możesz ustawić scrollbar-colorjedną 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 darki lightwartoś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:

Możesz ustawić scrollbar-widthjedną 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 thinkonkretna 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ć ). thinKeywork 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-widthwł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:

Alexander O'Mara
źródło
Dziękuję za tę odpowiedź. Zaktualizowałem zaakceptowaną odpowiedź, aby ją promować (i inną odpowiednią odpowiedź), aby ludzie mogli ją zobaczyć.
thirtydot
1
To zasadniczo powiela odpowiedź Lucy sprzed trzech tygodni.
Josh Habdas
@JoshHabdas Ta odpowiedź nie zawiera prawie tyle informacji na temat kompatybilności lub użytkowania. Stworzyłem tę odpowiedź, ponieważ druga odpowiedź nie zawierała ważnych informacji, których szukałem.
Alexander O'Mara,
1
Możesz wyrazić uznanie, zasugerować opinię lub rozważyć edycję odpowiedzi.
Josh Habdas
2
@JoshHabdas Cóż, 5 osób uznało ją już za przydatną i zawiera informacje, których nie znaleziono nigdzie indziej w sieci, więc się nie zgadzam.
Alexander O'Mara,
43

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ść.

.scroll_content {
    position: relative;
    width: 400px;
    height: 414px;
    top: -17px;
    padding: 20px 10px 20px 10px;
    overflow-y: auto;
}

Aby zobaczyć demo i nieco bardziej szczegółowe wyjaśnienia, sprawdź tutaj ...

jsfiddle.net/aj7bxtjz/1/

Tomaz
źródło
7
To niestety nie odpowiada na pytanie. Dymitr próbuje stylizować pasek przewijania, a nie ukrywać go.
stvnrynlds
14
To było 4 lata temu (jestem tego świadomy), więc jestem pewien, że już coś zrobił. Ale temat jest nadal aktualny - podczas gdy inne przeglądarki pozwalają na pewien rodzaj „nielegalnej” modyfikacji pasków przewijania, FF nie. Właśnie dlatego postanowiłem go opublikować, a efektem frontonu jest wizualnie stylizowany pasek przewijania, niezależnie od tego, że sposobem na to jest ukrywanie jego części.
Tomaz
uwielbiam to rozwiązanie oprócz wszystkich dodatkowych znaczników z pozycjonowaniem bezwzględnym (sprawia, że ​​rzeczy o zmiennej wielkości są koszmarem), a ponadto nie możesz tak naprawdę zmienić stylu, po prostu maskujesz / ukrywasz elementy istniejącego scrollera - szkoda, jeśli chcę zielony pasek!
RozzA
3
tak, po czterech latach nie chodzi tylko o odpowiedź na pytanie PO, ale o wkład w społeczność.
tmthyjames
3
Istotą problemu jest to, że rozwiązania zapewniane przez niektóre silniki renderujące są niestandardowe. To pytanie najlepiej odpowiada moim obawom i oto odpowiedź, na którą przewijałem.
Filip Dupanović,
36

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.

Markus Coetzee
źródło
3
Jest też emulator przewijania gładzika - tego używa twitch.tv.
forivall
1
Idealny pasek przewijania jest naprawdę bardzo dobry. Po wyczerpaniu wielu innych opcji uznałem, że jest to najlepsze rozwiązanie. Dzięki za sugestię.
Leonard Teo,
nanoScroller jest również naprawdę dobry i stosunkowo szczupły. jamesflorentino.github.io/nanoScrollerJS W przeciwieństwie do ciężkich wtyczek JS, ten po prostu ukrywa natywny scroller i pokazuje alternatywny scroller za pomocą natywnego zdarzenia scroll
Danny R
1
unikałem wszystkich rozwiązań jquery, ponieważ wszystkie one opóźniają się na wolniejszych maszynach lub maszynach pod
presją
31

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

.scroller {
  overflow-y: scroll;
  scrollbar-color: #0A4C95 #C2D2E4;
}

Dla Chrome

.scroller::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

.scroller::-webkit-scrollbar-track-piece  {
    background-color: #C2D2E4;
}

.scroller::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: #0A4C95;
}

Pamiętaj, że w odniesieniu do Twojego rozwiązania można również stosować prostsze reguły Chrome, takie jak:

.scroller::-webkit-scrollbar-track  {
    background-color: #C2D2E4;
}

.scroller::-webkit-scrollbar-thumb {
    height: 30px;
    background-color: #0A4C95;
}

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;

Luca Detomi
źródło
1
Wygląda na to, że IE 5.5 mógł w końcu coś dostać. :)
Josh Habdas
5

Rok 2020 to działa

/* Thin Scrollbar */
:root{
  scrollbar-color: rgb(210,210,210) rgb(46,54,69) !important;
  scrollbar-width: thin !important;
}

https://github.com/Aris-t2/CustomCSSforFx/issues/160

człowiek
źródło
Dobra wiadomość, ale jak możemy zmienić zarys?
AbeIsWatching
0

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

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;
}

sprawdź http://codemug.com/html/custom-scrollbars-using-css/ w celu uzyskania szczegółowych informacji.

ipirlo
źródło
2
próbowałem tak samo jak napisałeś, ale to nie działa dla mojego w FF, sprawdź jsfiddle.net/gGbkY/1 czy coś mi brakuje?
Satinder singh
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.
ipirlo,
1
proszę sprawdzić ten sam link: to już nie działa
Krunal Shah
3
Jaki jest styl użytkownika?
Marecky
Błąd, który podłączyłeś, został zgłoszony 17 lat temu i nadal nie został przypisany. Myślę, że można bezpiecznie powiedzieć, że FF nigdy nie będzie wspierać ukrywania rodzimych pasków przewijania.
Sterling Bourne,
-2
@-moz-document url-prefix(http://),url-prefix(https://) {
    scrollbar {
       -moz-appearance: none !important;
       background: rgb(0,255,0) !important;
    }
    thumb,scrollbarbutton {
       -moz-appearance: none !important;
       background-color: rgb(0,0,255) !important;
    }

    thumb:hover,scrollbarbutton:hover {
       -moz-appearance: none !important;
       background-color: rgb(255,0,0) !important;
    }
    scrollbarbutton {
       display: none !important;
    }
    scrollbar[orient="vertical"] {
      min-width: 15px !important;
    }
}
ramme
źródło
5
Podałeś blob kodu z niewielką lub żadną informacją opisującą co robi lub jak to robi.
Josh Habdas,