Пользовательские полосы прокрутки становятся популярными, и вы, наверняка, сталкивались с веб-сайтами с уникальными полосами прокрутки, что позволяло сайтам выглядеть более стильно.
Существует несколько способов реализации пользовательской полосы прокрутки. В этом уроке мы будем использовать CSS3, что является самым простым способом. Конечно, есть jQuery-плагины, которые могут помочь с настройкой полосы прокрутки, но я не люблю добавлять много JavaScript на свой сайт. Если вы дизайнер, фотограф или просто хотите, чтобы на вашем сайте был крутой скроллбал, воспользуйтесь каким-нибудь jQuery-плагином.
Вы должны знать, что пользовательские полосы прокрутки настраиваются c помощью CSS свойств с префиксом -webkit в браузерах, использующих механизм рендеринга Webkit (и Blink).
Прежде чем начать, давайте рассмотрим из чего состоит скроллбар:
Терминология
Скролбар состоит из семи различных элементов:
::-webkit-scrollbar { /* 1 - скроллбар */ }
::-webkit-scrollbar-button { /* 2 - кнопка */ }
::-webkit-scrollbar-track { /* 3 - трек */ }
::-webkit-scrollbar-track-piece { /* 4 - видимая часть трека */ }
::-webkit-scrollbar-thumb { /* 5 - ползунок */ }
::-webkit-scrollbar-corner { /* 6 - уголок */ }
::-webkit-resizer { /* 7 - изменение размеров окна*/ }
Теперь, когда вы знакомы с терминологией, давайте начнем!
Настройка
Создайте файлы index.html и style.css. В index.html поместите следующее:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Стилизация скроллбара с помощью CSS</title>
<link type="text/css" rel="stylesheet" href="styles.css">
</head>
<body>
<div class="scrollbar" id="style-1">
<div class="force-overflow"></div>
</div>
</body>
</html>
Теперь займемся style.css
Во-первых, мы устанавливаем для класса .scrollbar width, height, background-color, затем устанавливаем overflow-y: scroll
чтобы получить вертикальную полосу прокрутки. Мы задали min-height: 450px
элементу с классом .force-overflow, чтобы появилась полоса прокрутки (т.к. мы использовали свойство overflow-y для скролла в классе .scrollbar).
.scrollbar {
background-color: #F5F5F5;
float: left;
height: 300px;
margin-bottom: 25px;
margin-left: 22px;
margin-top: 40px;
width: 65px;
overflow-y: scroll;
}
.force-overflow {
min-height: 450px;
}
Теперь мы используем ::-webkit-scrollbar для стилизации полосы прокрутки. Он заменит ширину по умолчанию новой шириной, равной 6px
и фоном с цветом #F5F5F5
:
#style-1::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
}
Теперь мы изменим вид ползунка на более привлекательный. Мы используем псевдоэлемент (т. е. ::- webkit-scrollbar-thumb) и устанавливаем цвет ползунка - background-color.
#style-1::-webkit-scrollbar-thumb {
background-color: #000000;
}
После этих манипуляций ползунок выглядит так:
Мы использовали box-shadow и scrollbar-track
, чтобы сделать его стильным и добавить контраст между полосой прокрутки и треком.
#style-1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
Заключение
В заключении еще раз повторимся:
- Стилизованные полосы прокрутки не являются чем-то необычным. Вы найдете их на основных сайтах и блогах, особенно на личных портфолио.
- Если вам нужна кроссбраузерность, то к вашим услугам тонны jQuery-плагинов, которые могут помочь с настройкой скроллбара.
- Пользовательские полосы прокрутки отображаются лишь в браузерах, использующих механизм рендеринга Webkit (и Blink), с помощью вендорного префикса
-webkit
.
Вы можете найти полный код этого урока здесь.
Вот и все, надеюсь, вам понравится!