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

Был бы признателен за чей-то экспертный совет!

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

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

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

И это для справочной информации: 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/mdbootstrap/perfect-scrollbar
• https://github.com/Grsmto/simplebar
• https://github.com/vitch/jScrollPane

Firefox 64 добавлена поддержка спецификации проекта CSS Scrollbars Module Level 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>

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

• auto Ширина полосы прокрутки по умолчанию для платформы.
• thin Тонкий вариант ширины полосы прокрутки на платформах, которые предоставляют эту опцию, или более тонкая полоса прокрутки, чем ширина полосы прокрутки платформы по умолчанию.
• none Полоса прокрутки не отображается, однако элемент все еще можно прокручивать.

Вы также можете установить конкретное значение длины, в соответствии со спецификацией. И thinта, и другая длина могут ничего не делать на всех платформах, и что именно она делает, зависит от платформы. В частности, Firefox, похоже, в настоящее время не поддерживает определенное значение длины ( этот комментарий к их баг-трекеру, кажется, подтверждает это ). thinKeywork действительно , кажется, хорошо поддерживается , однако, с MacOS и поддержки Windows , в- крайней мере.

Вероятно, стоит отметить, что опция значения длины и все scrollbar-widthсвойство рассматриваются для удаления в будущем проекте, и если это произойдет, это конкретное свойство может быть удалено из Firefox в будущей версии.

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

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

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

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

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

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

jsfiddle.net/aj7bxtjz/1/

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

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

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

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

Начиная с 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;

Год 2020 это работает

/* 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

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

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