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>
person
Alexander O'Mara
schedule
08.01.2019
fakescroll- крошечный скрипт vanilla-js для настраиваемых полос прокрутки. - person vsync schedule 05.07.2018