Блог Сергея Князева

Скрипты
Меняем вид полосы прокрутки

Меняем вид полосы прокрутки

06.06.20168830
Сегодня я хочу показать вам несколько красивых решений, с помощью которых вы сможете изменить вид полосы прокрутки, сделав её красивее. Установка этих решений не займёт у вас много времени.
Плюсом этих вариантов является то, что используется только CSS. Для установки просто выберите понравившейся вам пример и установите код CSS в файл со стилями.

Пример № 1

Данный вариант подойдёт как для тёмных, так и для светлых сайтов.
Center-WD - Меняем вид полосы прокрутки

Код
/*Scrollbar 1*/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: rgba(0,0,0,.4);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.8);
  border-radius: 5px;
}
::-webkit-scrollbar-corner {
}

Пример № 2

Очень тонкая полоса прокрутки. Хорошо впишется в тёмный дизайн.
Center-WD - Меняем вид полосы прокрутки

Код
/*Scrollbar 2*/
::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}
::-webkit-scrollbar-track {
  background-color: rgba(0,0,0,0.25);
}
::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.8);
}
::-webkit-scrollbar-corner {
}

Пример № 3

Данный вариант удачно впишется для дизайна сайта светлых тонов.
Center-WD - Меняем вид полосы прокрутки

Код
/*Scrollbar 3*/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.5);
  border-radius: 5px;
}
::-webkit-scrollbar-corner {
}

Пример № 4

Отличное решение для тёмных сайтов.
Center-WD - Меняем вид полосы прокрутки

Код
/*Scrollbar 4*/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}  
  ::-webkit-scrollbar-track {
  background-color: rgba(0,0,0,0.2);
  box-shadow: inset 0px 0px 0px 2px #78addf;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,1);
  border-radius: 5px;
}
::-webkit-scrollbar-corner {
}

Пример № 5

Этот пример специально был сделан для сайтов с чёрным или серым фоном.
Center-WD - Меняем вид полосы прокрутки

Код
/*Scrollbar 5*/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}  
::-webkit-scrollbar-track {
  background-color: #4f4f4f;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb {
  background-color: #ba605e;
  border-radius: 5px;
}
::-webkit-scrollbar-corner {
}


На этом всё. Надеюсь вам понравятся эти интересные решения для сайтов.
Нашли ошибку в тексте?
Выделите её и нажмите Ctrl+Enter. Сообщая мне об ошибке вы помогаете сделать мой блог лучше.
Автор материала
Сохраните в социальную сеть
Комментарии (0)
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.