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

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

::-webkit-scrollbar-track-piece {
  background-color: #c2d2e4;
}

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

Ответ 2 · рейтинг 83 · Alexander O'Mara

Firefox 64 добавляет поддержку проекта спецификации уровня 1 модуля полос прокрутки CSS, который добавляет два новых свойства _ 1_ и _ 2_, которые дают некоторый контроль над отображением полос прокрутки.

Для 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, похоже, в настоящее время не поддерживает определенное значение длины (этот комментарий на их счетчике ошибок, кажется, подтверждает это). Клавиатура thin, похоже, хорошо поддерживается, по крайней мере, с поддержкой 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>

Ответ 3 · рейтинг 46 · Luca Detomi

Поскольку 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, в настоящее время необходимо установить его как "thin" со следующим правилом scrollbar-width: thin;

Ответ 4 · рейтинг 45 · Tomaz

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

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

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

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

jsfiddle.net/aj7bxtjz/1/

Ответ 5 · рейтинг 35 · Markus Coetzee

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

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

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

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

Ответ 6 · рейтинг 31 · human

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

Ответ 7 · рейтинг 4 · rashmi agrawal

На данный момент доступно только два свойства для настройки полосы прокрутки Firefox.

цвет полосы прокрутки и ширина полосы прокрутки

цвет полосы прокрутки: красный желтый; (дорожка, большой палец) ширина полосы прокрутки: 5 пикселей;

HTML

<div class="demo">

css

.demo {
overflow-y:scroll;
}

.demo {
scrollbar-color:red yellow;
scrollbar-width:5px;
}

Ответ 8 · рейтинг 3 · Nimm drei

Здесь я попробовал этот CSS для всех основных браузеров и протестировал: Пользовательский цвет отлично работает на полосе прокрутки.

Да, есть ограничения на несколько версий разных браузеров.

/* Only Chrome */
html::-webkit-scrollbar {width: 17px;}
html::-webkit-scrollbar-thumb {background-color: #0064a7; background-clip: padding-box; border: 1px solid #8ea5b5;}
html::-webkit-scrollbar-track {background-color: #8ea5b5; }
::-webkit-scrollbar-button {background-color: #8ea5b5;}
/* Only IE */
html {scrollbar-face-color: #0064a7; scrollbar-shadow-color: #8ea5b5; scrollbar-highlight-color: #8ea5b5;}
/* Only FireFox */
html {scrollbar-color: #0064a7 #8ea5b5;}
/* View Scrollbar */
html {overflow-y: scroll;overflow-x: hidden;}

<!doctype html>
<html lang="en" class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <header>
        <div id="logo"><img src="/logo.png">HTML5&nbsp;Layout</div>
        <nav>
            <ul>
                <li><a href="/">Home</a>
                <li><a href="https://html-css-js.com/">HTML</a>
                <li><a href="https://html-css-js.com/css/code/">CSS</a>
                <li><a href="https://htmlcheatsheet.com/js/">JS</a>
            </ul>
        </nav>
    </header>
    <section>
        <strong>Demonstration of a simple page layout using HTML5 tags: header, nav, section, main, article, aside, footer, address.</strong>
    </section>
    <section id="pageContent">
        <main role="main">
            <article>
                <h2>Stet facilis ius te</h2>
                <p>Lorem ipsum dolor sit amet, nonumes voluptatum mel ea, cu case ceteros cum. Novum commodo malorum vix ut. Dolores consequuntur in ius, sale electram dissentiunt quo te. Cu duo omnes invidunt, eos eu mucius fabellas. Stet facilis ius te, quando voluptatibus eos in. Ad vix mundi alterum, integre urbanitas intellegam vix in.</p>
            </article>
            <article>
                <h2>Illud mollis moderatius</h2>
                <p>Eum facete intellegat ei, ut mazim melius usu. Has elit simul primis ne, regione minimum id cum. Sea deleniti dissentiet ea. Illud mollis moderatius ut per, at qui ubique populo. Eum ad cibo legimus, vim ei quidam fastidii.</p>
            </article>
            <article>
                <h2>Ex ignota epicurei quo</h2>
                <p>Quo debet vivendo ex. Qui ut admodum senserit partiendo. Id adipiscing disputando eam, sea id magna pertinax concludaturque. Ex ignota epicurei quo, his ex doctus delenit fabellas, erat timeam cotidieque sit in. Vel eu soleat voluptatibus, cum cu exerci mediocritatem. Malis legere at per, has brute putant animal et, in consul utamur usu.</p>
            </article>
            <article>
                <h2>His at autem inani volutpat</h2>
                <p>Te has amet modo perfecto, te eum mucius conclusionemque, mel te erat deterruisset. Duo ceteros phaedrum id, ornatus postulant in sea. His at autem inani volutpat. Tollit possit in pri, platonem persecuti ad vix, vel nisl albucius gloriatur no.</p>
            </article>
        </main>
        <aside>
            <div>Sidebar 1</div>
            <div>Sidebar 2</div>
            <div>Sidebar 3</div>
        </aside>
    </section>
    <footer>
        <p>&copy; You can copy, edit and publish this template but please leave a link to our website | <a href="https://html5-templates.com/" target="_blank" rel="nofollow">HTML5 Templates</a></p>
        <address>
            Contact: <a href="mailto:[email protected]">Mail me</a>
        </address>
    </footer>


</body>

</html>

Ответ 9 · рейтинг 1 · Figar Ali

Эта функция является в значительной степени экспериментальной, и я думаю, Mozilla предстоит многое сделать, пока она не станет доступной для всех на каждой странице. Я протестировал множество решений, но следующий код работает отлично.

CSS

:root {
  scrollbar-color: #333333 #999999 !important;
  scrollbar-width: thin !important;
}

ИЛИ

#ClassName {
  scrollbar-color: #333333 #999999 !important;
  scrollbar-width: thin !important;
}

Ссылка: ССЫЛКА 1 ССЫЛКА 2

Ответ 10 · ipirlo

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

Ответ 11 · Justin Bashombana

Firefox принимает только:

scrollbar-color: #f8f8f8 //Add your color
scroll-bar-width: thin/auto/none