Niestandardowy pasek przewijania CSS dla Firefoksa
Chcę dostosować pasek przewijania za pomocą CSS.
Używam tego kodu CSS WebKit, który działa dobrze na 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 Firefoksie?
Wiem, że mogę to łatwo zrobić używając jQuery, ale wolałbym to zrobić z czystym CSS, jeśli jest to wykonalne.
Byłabym wdzięczna za czyjąś fachową radę!6 answers
Nie ma odpowiednika Firefoksa ::-webkit-scrollbar
i znajomych.
Będziesz musiał trzymać się JavaScript.
Wiele osób chciałby tę funkcję, zobacz: https://bugzilla.mozilla.org/show_bug.cgi?id=77790
Ten raport prosi o dokładnie to samo, o co prosisz: https://bugzilla.mozilla.org/show_bug.cgi?id=547260
Został zamknięty jako DUPLIKAT pierwszego raportu, z którym się połączyłem.
Jeśli chodzi o JavaScript zamienniki go, można 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...)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-04 11:08:57
Czy mogę zaoferować alternatywę?
Żadnych skryptów, tylko standardowe style css i trochę kreatywności. Krótka odpowiedź-maskowanie części istniejącego paska przewijania przeglądarki, co oznacza, że zachowujesz całą jej funkcjonalność.
.scroll_content {
position: relative;
width: 400px;
height: 414px;
top: -17px;
padding: 20px 10px 20px 10px;
overflow-y: auto;
}
Aby zapoznać się z demo i nieco bardziej szczegółowym wyjaśnieniem, sprawdź tutaj...
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-05 14:14:55
Pomyślałem, że podzielę się moimi odkryciami w przypadku, gdy ktoś rozważa wtyczkę JQuery do wykonania pracy.
Dałem jQuery Custom Scrollbar a go. Jest to dość fantazyjne i robi pewne płynne przewijanie (z bezwładnością przewijania) i ma mnóstwo parametrów, które można dostosować, ale skończyło się na tym, że jest trochę zbyt intensywne dla mnie CPU (i dodaje sporo do DOM).
Teraz daję Perfect Scrollbar a go. Jest prosty i lekki (6KB) i robi porządną robotę, więc daleko. To nie jest intensywne CPU w ogóle (o ile mogę powiedzieć) i dodaje bardzo mało do twojego DOM. Ma tylko kilka parametrów do poprawienia( prędkość kół i propagacja kół), ale to wszystko, czego potrzebuję i ładnie obsługuje aktualizacje przewijanej zawartości (takie jak ładowanie obrazów).
P. S. rzuciłem okiem na JScrollPane, ale @ simone ma rację, to trochę przestarzałe i PITA.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-30 06:21:59
2018 Firefox scrollbars nadal wygląda tak źle, jak 1992, to PITA, ale możemy teraz używać filtrów css na nich.
Oto przykład z zielonkawym Krzyżem kompatybilnym z przeglądarką hommous tint na górze.
Użyj mądrze .
div {
max-height: 200px;
max-width: 80%;
overflow-x: hidden;
overflow-y: scroll;
filter: sepia(100%) saturate(360%) grayscale(0) contrast(140%) hue-rotate(56deg) invert(16%)
}
<div>
<ul>
<li><a href="/wiki/Chapati" title="Chapati">Chapati</a>, unleavened flatbread from the <a href="/wiki/Indian_subcontinent" title="Indian subcontinent">Indian subcontinent</a></li>
<li><a href="/wiki/Wheat_tortilla" title="Wheat tortilla">Flour tortilla</a>, a thin unleavened flatbread from <a href="/wiki/Mexico" title="Mexico">Mexico</a></li>
<li><a href="/wiki/Focaccia" title="Focaccia">Focaccia</a>, a flat oven-baked bread from <a href="/wiki/Italy" title="Italy">Italy</a></li>
<li><a href="/wiki/Injera" title="Injera">Injera</a>, a sourdough-risen flatbread from <a href="/wiki/East_Africa" title="East Africa">East Africa</a></li>
<li><a href="/wiki/Khachapuri" title="Khachapuri">Khachapuri</a>, a breaded cheese dish from <a href="/wiki/Georgia_(country)" title="Georgia (country)">Georgia</a></li>
<li><a href="/wiki/Khubz" title="Khubz">Khubz</a>, a round bread from the <a href="/wiki/Arabian_Peninsula" title="Arabian Peninsula">Arabian Peninsula</a></li>
<li><a href="/wiki/Matnakash" title="Matnakash">Matnakash</a>, a leavened bread from <a href="/wiki/Armenia" title="Armenia">Armenia</a> (related to the <a href="/wiki/Ramadan_pita" class="mw-redirect" title="Ramadan pita">Ramadan pita</a>)</li>
<li><a href="/wiki/Naan" title="Naan">Naan</a>, a leavened, oven-baked flatbread from <a href="/wiki/Central_Asian_cuisine" class="mw-redirect" title="Central Asian cuisine">Central</a> and <a href="/wiki/South_Asian_cuisine" title="South Asian cuisine">South Asia</a></li>
<li><a href="/wiki/Pit%C4%83_de_Pecica" title="Pită de Pecica">Pită de Pecica</a>, a round bread from <a href="/wiki/Romania" title="Romania">Romania</a></li>
<li><a href="/wiki/Rghaif" class="mw-redirect" title="Rghaif">Rghaif</a>, a pancake-like bread from <a href="/wiki/Maghreb" title="Maghreb">Northwest Africa</a></li>
</ul>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-22 19:09:12
@-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;
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-29 09:48:06
Działa w stylu użytkownika i wydaje się, że nie działa na stronach internetowych. Nie znalazłem oficjalnego kierunku od Mozilli w tej sprawie. Chociaż może to zadziałało w pewnym momencie, Firefox nie ma oficjalnego wsparcia dla tego. 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 / Po szczegóły.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-29 20:41:37