Стилізація стрічки прокрутки

За допомогою CSS легко стилізуємо стрічку прокрутки до дизайну вашого веб-сайту.

Стрічка прокрутки -

це маленька смуга, яка з’являється на бічному краї веб-сторінки, коли вміст сторінки перевищує розмір вікна браузера. Зазвичай, ця стрічка прокрутки має простий стиль, але з допомогою CSS можна легко стилізувати її, щоб вона виглядала більш естетично та підходила до дизайну вашого веб-сайту.

Нижче наведений приклад коду CSS, який додає красивий покажчик прокрутки та змінює фоновий колір полоси прокрутки на сторінці вашого веб-сайту.

				
					/* СТИЛІЗАЦІЯ СТРІЧКИ ПРОКРУТКИ */

/* Перевірка ширини екрану, для визначення коли застосовувати стилі */
@media screen and (min-width: 1201px) {
/* Задаємо колір та форму покажчика прокрутки */
::-webkit-scrollbar-thumb {
	background: #00DFC8;
	border-radius: 10px;
}

/* Задаємо ширину та висоту полоси прокрутки, а також її фоновий колір */
::-webkit-scrollbar {
	width: 7px;
	height: 7px;
	background: #161718;
}

				
			

Результат виконання коду ви бачите на цій сторінці. За допомогою цього коду стилізовано стрічку прокрутки на моєму сайті.

Як бачите, цей код CSS дозволяє змінити стиль стрічки прокрутки на сторінці, додати красивий покажчик та змінити її фоновий колір. Це додає не тільки естетичний ефект, але й може зробити сторінку більш корисною для користувача, адже зрозуміло, що це – частина сторінки, яку можна прокручувати.

Я вам
зателе­фоную!

Залиште заявку і я вам зателефоную та надам безкоштовну консультацію