10

Часто, когда я просматриваю веб-страницу с большим количеством контента, полосу прокрутки трудно найти, поскольку контраст между положением интерактивной части и фоном низкий.

Было бы здорово, если бы у меня был способ изменить цвет кликабельной части полосы прокрутки, чтобы я мог лучше ее увидеть. Это возможно?

1 ответ1

5

Цвет полосы прокрутки определяется темой Windows.

Для браузеров вы можете использовать собственный CSS. В вашем случае для Google Chrome вы можете установить расширение «Стильный» и добавить новый стиль со следующим кодом:

body {
    position: absolute;
    top:20px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    padding: 0px; 
    overflow-y: scroll;
    overflow-x: hidden;
}

::-webkit-scrollbar {width: 12px;}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {background: rgba(255,0,0,0.4); }

При желании стиль может быть улучшен с помощью:

html { overflow: auto; }

Всё ещё ищете ответ? Посмотрите другие вопросы с метками .