Стилізація повзунка браузера на CSS

Є декілька шляхів зробити власний повзунок. Ми будемо використовувати CSS3, він найпростіший. Є jQuery плагіни, що допомагають в стилізації, проте я не люблю додавати багато JavaScript коду до свого веб-сайту.

Примітка: пам'ятайте, що кастомні повзунки стоять перед префіксом –webkit у браузерах, що використовують Webkit чи Blink.

Перед тим, як почати, давайте подивимось на базову структуру повзунка:

Терміни

-webkit-scrollbar включає в себе сім різних псевдо-елементів, і разом містять в собі повний UI елемент скролбару:

1. ::-webkit-scrollbar – фон;
2. ::-webkit-scrollbar-button – кнопки направлення на повзунку;
3. ::-webkit-scrollbar-track - пустий проміжок «під» прогрес-баром ("доріжка");
4. ::-webkit-scrollbar-track-piece – найвищий шар прогрес бару, що не покривається самим повзунком;
5. ::-webkit-scrollbar-thumb - елемент, котрий перетягується, щоб скроллити та що змінює свій розмір, зважаючи на розмір елементу, для якого він є повзунком (сам повзунок);
6. ::-webkit-scrollbar-corner - нижній кут скрол-елементу, де «зустрічаються» два повзунки (знизу та справа);
7. ::-webkit-resizer - елемент, що знаходиться на нижньому куті, ним можна міняти розмір головного елемента;

Налаштування

Спершу, створіть index.html та style.css файли, відкрийте свою директорію за допомогою текстового редактора.

Створення HTML документа (index.html)

    
        <meta charset="UTF-8">
        <title>Стилізація повзунка браузеру на CSS</title>
        <link href="styles.css" rel="stylesheet" type="text/css">
   
        <div class="scrollbar">
            <div class="force-overflow"></div>
        </div> 
    

Вам буде потрібно включити файл style.css в HTML. Надрукуйте цей код, або просто скопіюйте :)

CSS код (style.css)

Для початку, ми назначаємо класу .scrollbar такі параметри: width, height, background-color, потім ставимо overflow-y: scroll, щоб дістати вертикальний повзунок. Ми додамо min-height: 450px для div .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;
}

Тепер, ми використовуємо псевдо-елемент повзунка, щоб створити свій унікальний скролбар. Він замінить стандартну ширину новою шириною 6px, а також додасть background-color: #F5F5F5.

. . .

#style-1::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
} 

. . .

Коли ми знаємо, що повзунок має в собі track, button і thumb, ми будемо давати скроллбару дизайн. Ми використовуємо псевдо-елемент (тобто ::-webkit-scrollbar-thumb) з префіксом -webkit і ставимо повзунку 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;
}

Висновок

Кастомізація повзунків за допомогою CSS проста, але виглядає трохи грубо. Операційні системи: Windows, OS X та Linux мають власний стиль для повзунка. Це може привести до небажаних результатів та невідповідності для вашого дизайну.

Я створив більше повзунків, використовуючи процедуру, описану тут. Ось демо на CodePen, в ньому ви можете знайти їх та їхній повний код.