Niestandardowy pasek przewijania CSS dla przeglądarki Firefox

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

Pod koniec 2018 r. W Firefoksie dostępna jest teraz ograniczona personalizacja!

Zobacz te odpowiedzi:

• https://stackoverflow.com/a/54101063/405015
• https://stackoverflow.com/a/53739309/405015

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

• https://github.com/noraesae/perfect-scrollbar
• https://github.com/jnicol/trackpad-scroll-emulator
• https://github.com/vitch/jScrollPane (ale jest przestarzały i najwyraźniej PITA ...)

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:

.scroll {
  width: 20%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-color-auto {
  scrollbar-color: auto;
}
.scroll-color-dark {
  scrollbar-color: dark;
}
.scroll-color-light {
  scrollbar-color: light;
}
.scroll-color-colors {
  scrollbar-color: orange lightyellow;
}

<div class="scroll scroll-color-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div class="scroll scroll-color-dark">
<p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p>
</div>

<div class="scroll scroll-color-light">
<p>light</p><p>light</p><p>light</p><p>light</p><p>light</p><p>light</p>
</div>

<div class="scroll scroll-color-colors">
<p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p>
</div>

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:

.scroll {
  width: 30%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-width-auto {
  scrollbar-width: auto;
}
.scroll-width-thin {
  scrollbar-width: thin;
}
.scroll-width-none {
  scrollbar-width: none;
}

<div class="scroll scroll-width-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div class="scroll scroll-width-thin">
<p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p>
</div>

<div class="scroll scroll-width-none">
<p>none</p><p>none</p><p>none</p><p>none</p><p>none</p><p>none</p>
</div>

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/

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.

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;

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

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.

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