Как изменить scrollbar в css, простой и надежный способ — HRCode
Верстка элементов

Как изменить scrollbar в css, простой и надежный способ

При создании веб-страниц иногда приходится создавать блоки с контентом, которые имеют полосу прокрутки, это могут быть, как таблицы, так и простые текстовые блоки.
Но полоса прокрутки по умолчанию имеет вид лишенный какого либо внешнего оформления и под определенный дизайн сайта может совсем не подходить. Исправить это дело нам помогут специальные свойства и псевдо-элементы.
К сожалению единого стандарта по оформлению scrollbar для всех браузеров нет, поэтому придется сделать два варианта оформления, но так, чтобы их настройки можно было производить в одном месте.

В браузерах разработанных на движках Blink и WebKit, таких, как Chrome, Edge, Яндекс Браузер, Opera, а также браузер IOS Safari, изменить scrollbar можно с помощью таких псевдо-элементов, как ::-webkit-scrollbar, ::-webkit-scrollbar-track и ::-webkit-scrollbar-thumb.

В браузере Mozilla, который использует движок Gecko, scrollbar можно изменить с помощью свойств scrollbar-color и scrollbar-width.

В чем разница между ними для нас? Основная разница в том, что псевдо-элементы для браузеров на Blink и WebKit являются не стандартным способом и в скором будущем могут уйти из обихода, а у Gecko новые свойства по стандарту стандарту W3C, у которых есть все шансы на будущее.

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

css

/* Переменные */
:root {
    --scrollbar-track-bg: #458245;
    --scrollbar-thumb-bg: #714826;
    --scrollbar-width: 10px;
    --scrollbar-height: 10px;
    --scrollbar-border: 2px solid var(--scrollbar-track-bg);
    --scrollbar-border-radius: 1em;
}

Так как у браузера Mozilla с помощью переменной можно изменить только цветовую гамму полосы прокрутки, то общими свойствами будут только —scrollbar-track-bg и —scrollbar-thumb-bg.
Переменная —scrollbar-track-bg отвечает за цвет дорожки.
Переменная —scrollbar-thumb-bg отвечает за цвет ползунка.

На этом общие настройки заканчиваются, далее идут настройки для браузеров на движках Blink и WebKit. Здесь для них есть более гибкие настройки, чем для движка Gecko. Для них можно указать различный размер полосы, обводку и закругления ползунка.

Если размер вертикального scrollbar и горизонтального будет одинаковым, то можно указать одну переменную с его значением, например —scrollbar-size, в данном примере мы указали два значения, по ширине —scrollbar-width и по высоте —scrollbar-height.

С помощью переменной —scrollbar-width мы можем изменить размер полосы прокрутки по вертикали.
А переменная —scrollbar-height позволяет нам изменять размер полосы прокрутки по горизонтали.

Далее идет настройка границы полосы прокрутки border, здесь мы можем сделать ее за счет границы визуально тоньше и придать закругления по бокам.
Переменная —scrollbar-border отвечает за размер границы, а переменная —scrollbar-border-radius за ее закругление.

scrollbar

Выглядеть это будет примерно как на изображении.

Теперь перейдем к написанию самих стилей на основе наших переменных.

css

/* Gecko */
*{
    scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg); 
    scrollbar-width: thin; 
}

Для браузеров на движке Gecko настроек пока не так много, здесь мы можем задать цвет полосы прокрутки в одном свойстве и ее толщину в другом.
Свойство scrollbar-color позволяет нам сразу указать какого цвета будет линия полосы прокрутки и ее ползунок. Здесь нужно сразу казать два цвета друг за другом, сначала цвет ползунка, затем цвет самой линии.
Свойство scrollbar-width позволяет нам указать толщину линии прокрутки. Здесь мы можем указать три значения auto | thin | none.
Если нужна обычная ширина линии, то можно этот параметр вообще не указывать, если нужна тонкая линия, то нужно указать scrollbar-width: thin;

Для браузеров на движках Blink и WebKit немного другая история, здесь больше настроек.

css

/* Blink и WebKit */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-height);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track-bg)         
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-bg);
    border: var(--scrollbar-border);
    border-radius: var(--scrollbar-border-radius);
}

Псевдо-элемент ::-webkit-scrollbar позволяет нам настроить ширину полосы прокрутки по отдельности, по вертикали и по горизонтали.
С помощью псевдо-элемента ::-webkit-scrollbar-track мы можем изменить цвет дорожки.
А псевдо-элемент ::-webkit-scrollbar-thumb позволяет нам изменить цвет бегунка, сделать его визуально меньше за счет толщины границы и изменить закругление его краев.

Возможно со временем настройка scrollbar будет полностью поддерживать спецификацию W3C и появятся дополнительные настройки для нее, пока мы имеем такой вариант.

Еще по теме:

Напишите что нибудь:

Ваш адрес email не будет опубликован. Обязательные поля помечены *