Пользовательская панель прокрутки CSS для Firefox

Я хочу настроить полосу прокрутки с помощью 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, если это возможно.

Буду признателен за консультацию специалиста!

Ответ 1

По состоянию на конец 2018 года в Firefox доступно ограниченное количество настроек!

Смотрите эти ответы:

И это для справочной информации: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109

~~Там нет Firefox, эквивалентного ::-webkit-scrollbar и друзьям.~~

~~Вам придется придерживаться JavaScript.~~

Многие люди хотели бы эту функцию, смотрите: https://bugzilla.mozilla.org/show_bug.cgi?id=77790

Что касается замены JavaScript, вы можете попробовать:

https://github.com/noraesae/perfect-scrollbar
https://github.com/jnicol/trackpad-scroll-emulator
https://github.com/vitch/jScrollPane (но он устарел и, видимо, пита...)

Ответ 2

Могу ли я предложить альтернативу?

Никаких сценариев вообще, только стандартизованные стили css и немного креативности. Короткий ответ - маскирование частей существующей полосы прокрутки браузера, что означает, что вы сохраняете все функциональные возможности.

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

Для демонстрации и немного более подробного объяснения, проверьте здесь...

jsfiddle.net/aj7bxtjz/1/

Ответ 3

Я думал, что поделюсь своими выводами на случай, если кто-то рассматривает плагин JQuery для этой работы.

Я дал JQuery Custom Scrollbar попробовать. Он довольно модный и выполняет плавную прокрутку (с инерцией прокрутки) и имеет множество параметров, которые вы можете настроить, но в итоге он оказался слишком загруженным для меня (и это добавляет изрядное количество в DOM).

Теперь я использую Perfect Scrollbar. Это простой и легкий (6 КБ), и он делает достойную работу до сих пор. Это не сильно нагружает процессор (насколько я могу судить) и очень мало добавляет к вашему DOM. Он получил только пару параметров для настройки (wheelSpeed и wheelPropagation), но это все, что мне нужно, и он прекрасно обрабатывает обновления прокручиваемого контента (такие как загрузка изображений).

PS Я быстро взглянул на JScrollPane, но @simone прав, теперь он немного устаревший и PITA.

Ответ 4

Firefox 64 добавляет поддержку черновика спецификации CSS Scrollbars Module уровня 1, который добавляет два новых свойства из scrollbar-width и scrollbar-color которые дают некоторый контроль над тем, как отображаются полосы прокрутки.

Вы можете установить scrollbar-color на одно из следующих значений (описания из MDN):

auto Рендеринг платформы по умолчанию для дорожки части полосы прокрутки, при отсутствии каких-либо других связанных свойств цвета полосы прокрутки.
dark Показать темную полосу прокрутки, которая может быть либо темным вариантом полосы прокрутки, предоставляемой платформой, либо пользовательской полосой прокрутки с темными цветами.
light Показать светлую полосу прокрутки, которая может быть либо облегченным вариантом полосы прокрутки, предоставляемой платформой, либо настраиваемой полосой прокрутки со светлыми цветами.
<color> <color> Применяет первый цвет к большому пальцу полосы прокрутки, второй - к дорожке полосы прокрутки.

Обратите внимание, что значения dark и light в настоящее время не реализованы в Firefox.

примечания macOS:

Автоматически скрывающие полупрозрачные полосы прокрутки, используемые по умолчанию в macOS, не могут быть окрашены этим правилом (они по-прежнему выбирают свой собственный контрастный цвет в зависимости от фона). Только постоянно отображаемые полосы прокрутки (Системные настройки> Показать полосы прокрутки> Всегда) окрашены.

Визуальная демонстрация:

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

Ответ 5

Поскольку Firefox 64, можно использовать новые спецификации для простой стилизации полосы прокрутки (не такой полной, как в Chrome с префиксами поставщиков).

В этом примере можно увидеть решение, которое объединяет разные правила для работы как с Firefox, так и с Chrome с одинаковым (не равным) конечным результатом (например, используйте ваши исходные правила Chrome):

Основные правила:

Для Firefox

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

Для 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;
}

Обратите внимание, что в отношении вашего решения можно также использовать более простые правила Chrome, как указано ниже:

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

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

Наконец, чтобы скрыть стрелки в полосах прокрутки также в Firefox, в настоящее время необходимо установить его как "тонкое" со следующим правилом scrollbar-width: thin;

Ответ 6

Полосы прокрутки Firefox 2018 года по-прежнему выглядят так же плохо, как и 1992 год, это PITA, но теперь мы можем использовать фильтры CSS для них.

Вот пример с зеленоватым перекрестным браузером, совместимым с гомогенным оттенком сверху.

Используйте с умом.

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>

Ответ 7

Он работает в пользовательском стиле и, похоже, не работает на веб-страницах. Я не нашел официального руководства от 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/.

Ответ 8

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