При создании веб-страниц иногда приходится создавать блоки с контентом, которые имеют полосу прокрутки, это могут быть, как таблицы, так и простые текстовые блоки.
Но полоса прокрутки по умолчанию имеет вид лишенный какого либо внешнего оформления и под определенный дизайн сайта может совсем не подходить. Исправить это дело нам помогут специальные свойства и псевдо-элементы.
К сожалению единого стандарта по оформлению 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, у которых есть все шансы на будущее.
Чтобы настройка обоих методов была более удобной, лучше всего сделать так, чтобы настраивать их внешний вид можно было в одном участке кода, например с помощью переменных. Так изменив цвет или толщину полосы прокрутки с помощью переменной, вы измените их свойства в обоих вариантах, что очень удобно.
/* Переменные */
: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 за ее закругление.
Выглядеть это будет примерно как на изображении.
Теперь перейдем к написанию самих стилей на основе наших переменных.
/* 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 немного другая история, здесь больше настроек.
/* 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 и появятся дополнительные настройки для нее, пока мы имеем такой вариант.
Kwork