CSS scrollbar-color — колір смуги прокрутки

CSS властивість scrollbar-color задає два кольори смуги прокрутки: повзунка й доріжки під ним.

правити

Загальний опис

Це стандартна заміна старому зоопарку ::-webkit-scrollbar-*: один рядок замість шести псевдоелементів, і працює в усіх сучасних браузерах.

Порядок значень: спершу повзунок, потім доріжка. Разом зі scrollbar-width це вся стандартна стилізація прокрутки.

Найчастіша причина взятись за неї — темна тема: системно-світла смуга на темному тлі світить, як прожектор. Достатньо задати на :root — успадкується всіма прокручуваними блоками.

Повної свободи, як у webkit-псевдоелементів, тут немає свідомо: ні скруглень, ні градієнтів — лише кольори. Зате це стандарт, і він не зламається.

правити

+ додати пораду чи нотатку

Переглядачі

Переглядачів ще не додано.

Приклади

+ запропонувати свій приклад у пісочниці

<div class="dark">
    <p>Рядок 1</p><p>Рядок 2</p><p>Рядок 3</p><p>Рядок 4</p><p>Рядок 5</p>
</div>

.dark {
    height: 120px;
    overflow-y: auto;
    background: #14170f;
    color: #eceee3;
    /* повзунок, потім доріжка */
    scrollbar-color: #5a5f4e #14170f;
}