Firefox 64 добавляет поддержку черновика спецификации CSS Scrollbars Module Уровень 1 , который добавляет два новых свойства из scrollbar-width и scrollbar-color, которые дают некоторый контроль над тем, как отображаются полосы прокрутки.
Вы можете установить scrollbar-color на одно из следующих значений (описания из MDN):
auto Рендеринг платформы по умолчанию для дорожки части полосы прокрутки при отсутствии каких-либо других связанных свойств цвета полосы прокрутки. dark Показать темную полосу прокрутки, которая может быть либо темным вариантом полосы прокрутки, предоставляемой платформой, либо пользовательской полосой прокрутки с темными цветами. light Показать светлую полосу прокрутки, которая может быть либо облегченным вариантом полосы прокрутки, предоставляемой платформой, либо настраиваемой полосой прокрутки со светлыми цветами. <color> <color> Применяет первый цвет для большого пальца полосы прокрутки, второй - для дорожки полосы прокрутки.
Обратите внимание, что dark и light значения в настоящее время не реализованы в Firefox .
macOS notes:
Автоматически скрывающие полупрозрачные полосы прокрутки, используемые по умолчанию в 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>