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

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

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

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

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*/
}

Добавить комментарий

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