• 791
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Сегодня обратил внимание ,что у меня не стандартный скролбар. Ну я и заинтересовался как его изменить под дизайн сайта. Как видите у меня уже скролбар измененый, обычно он квадратный это вы видите постоянно на других сайтах.
scrollbar-windows.png (159.27 Kb)
Но сейчас можно изменить самим вид скролбара добавив несколько строк стилей.
И так открываем файл стилей вашего шаблона и добавляем вот эти стили

Код:
/*скрол бар*/
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
/*скрол бар*/

или так покрасив бегунок в красный
Код:
/* Let's get this party started */
::-webkit-scrollbar {
width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}

Вот и все пользуемся,настройки простые, если что задавайте вопросы.

Можешь почитать и вот эту статейку "Страница перехода по внешней ссылке"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Какие темы вам интереснее?
Результаты

----