Отборочные материалы системы uCoz

Главная » Файлы » Скрипты для Ucoz
Стилизация полосы прокрутки с помощью CSS
[ · Скриншот ] 28.02.2016, 06:35
Данное решение является очень удобным, так, как здесь не задействуются JavaScript. Что в свою очередь убирает нагрузку на сайт. Все работает с помощью стилей и имеет минимум кода.

Установка
Вставляем данный код в Таблицу стилей (CSS)

Код
::-webkit-scrollbar-button {
background-image:url('');
background-repat:no-repeat;
width:5px;
height:0px
}

::-webkit-scrollbar-track {
background-color:#ecedee
}

::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
background-color:#6dc0c8;
}

::-webkit-scrollbar-thumb:hover{
background-color:#56999f;
}

::-webkit-resizer{
background-image:url('');
background-repeat:no-repeat;
width:4px;
height:0px
}

::-webkit-scrollbar{
width: 4px;
}

Установка на этом завершена. Теперь разберем, какая строка за что отвечает.

Цвет дорожки, по которой двигается бегунок прокрутки.

Меняем ecedee на свой цвет.

Код
::-webkit-scrollbar-track {
background-color:#ecedee
}

Цвет бегунка полосы, а так же его закругление.

Меняем 6dc0c8 на свой цвет.

Меняем значение border-radius для закругления.

Код
::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
  border-radius: 0px;
  background-color:#6dc0c8;
  }

Цвет бегунка при наведении на него курсора.

Меняем 56999f на свой цвет.

Код
::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
  border-radius: 0px;
  background-color:#6dc0c8;
  }

Основная ширина полосы прокрутки.

Меняем значение width

Код
::-webkit-scrollbar{
width: 4px;
}
Категория: Скрипты для Ucoz | Добавил: youCoz | Теги: css, полосы, стилизация, помощью, прокрутки
Просмотров: 617 | Загрузок: 0 | Рейтинг: 1.3/9
Всего комментариев: 0
Имя *:
Email:
Подписка:1
Код *: