Как изменить стиль скролла во всех браузерах через CSS (без библиотек) - IZIART

Разработка сайтов
индивидуальный дизайн

Главная » CSS » Как изменить стиль скролла во всех браузерах через CSS (без библиотек)

Как изменить стиль скролла во всех браузерах через CSS (без библиотек)

Обновлено: 05.10.2023
css

Стилизация скролла через CSS очень просто и быстро, данный метод работает для таких браузеров как Opera, Chrome, FireFox.

Как стилизовать скролл в Edge и IE не понятно, кто знает пишите в комментарии.

Для браузеров Opera и Chrome:

Просто добавьте следующий код в свой CSS файл

::-webkit-scrollbar-track {
	background-color: #fff; /*Цвет скролла*/
} 
::-webkit-scrollbar-thumb { 
	border-radius: 5px; /*Закругление ползунка*/
	background-color: #ccc; /*Цвет ползунка*/
} 
::-webkit-scrollbar { 
	width: 6px;  /*Толщина скролла*/
}

Для FireFox:

Для FireFox нужно сделать тоже самое, только код немного другой:

* {
	scrollbar-color: #ccc #fff; /*Цвет скролла, цвет ползунка*/
	scrollbar-width: thin; /*Толщина скролла thin, auto*/
}