Народ, всем привет. Сегодня у нас тема больше для программистов, особенно начинающих. А именно, как можно стилизовать скролл. Кто не помнит, это такая полосочка прокрутки справа или слева страницы или любого блока. Причем стилизовать мы его будем не за счет каких-то плагинов, а по большей части, библиотек, UI-компонентов и прочего на JS, а просто за счет CSS. Вариантов там немного, но все же немного подправить стандартный «серый» скролл можно.
Но, самое важно, что нужно понять – стилизовать скролл самой страницы не нужно, это считается плохим тоном, да и вообще, выглядит убого. Да и любого другого скролла на странице тоже, классика она всегда классика, пусть и уныло-серая. Однако, иногда возникают такие ситуации, когда у вас возникают скроллы в «дивах», чаще всего с текстом. Это и топики, и какие-то менюшки и прочее, описание товара. И если ваш сайт уж слишком яркий или какой-то дизайнерски-красивый, то пару изменений в серый скролл внести можно.
Но сразу скажу, что больших изменений не ждите, изменить его можно совсем немного, так что плюс минус цвет, и размер. Ну и незабываем, что кросс-браузерность тут работает на ура, а именно, в разных браузерах скролл будет выглядеть по-разному. Но можно приспособиться.
Для начал используем, так сказать, стоковые стили, которые изначально работали только в Mozila Firefox, но вроде как их подвезли и в Хромиум. У меня работало, но вес же чуть ниже мы будем использовать псевдо-классы. Итак, тут можно, по сути, поменять только цвет и размер:
html, body {
scrollbar-color: #458245 #714826;
scrollbar-width: auto | thin | none;
}
где: scrollbar-color: #458245 #714826; - 1-ый цвет, это цвет ползунка, а второй – цвет самого скролл-бара.
scrollbar-width: auto | thin | none; - это толщина скролл-бара, точнее, auto – по умолчанию, какой использует браузер, thin – узкий вариант, а none – просто его отключает вообще. Один стиль как для горизонтального, так и вертикального скролла.
Что касается webKit’a, а значит Хрома, Оперы, Сафари и прочих подобный браузеров, то тут можно еще и приплюсовать следующий свойства
1. полоса прокрутки (скролл-бар)
::-webkit-scrollbar {
width: 24px; /* ширина для вертикального скролла */
height: 8px; /* высота для горизонтального скролла */
background-color: #143861;
}
2. внутренний ползунок скролл-бара
::-webkit-scrollbar-thumb {
background-color: #843465;
border-radius: 9em;
box-shadow: inset 1px 1px 10px #f3faf7;
}
Примечание, тут также работает псевдокласс :hover -> ::-webkit-scrollbar-thumb:hover
3. Стрелки (начальная start и конечная end) для вертикального скролл-бара и горизонтального
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment {
background: linear-gradient(120deg, #02141a 40%, rgba(0, 0, 0, 0) 41%),
linear-gradient(240deg, #02141a 40%, rgba(0, 0, 0, 0) 41%),
linear-gradient(0deg, #02141a 30%, rgba(0, 0, 0, 0) 31%);
background-color: #f6f8f4;
}
Не забудьте перед :: указать название стиля вашего блока. И да, первые тип стиля (кастомные) перекроют стили для webkita.