Настройка полосы прокрутки с помощью CSS

9 февраля, 2022 11:44 дп 2 168 views | Комментариев нет

| | Комментировать запись

Пользовательские полосы прокрутки становятся все более популярными. Наверняка вы уже встречали веб-сайты с уникальными полосами прокрутки, благодаря которым эти сайты воспринимаются по-другому. Существует несколько основных способов настроить пользовательскую полосу прокрутки.

В этом руководстве мы рассмотрим самый простой способ – CSS3. Также есть плагины jQuery для настройки полосы прокрутки, но, чтобы их использовать, вам придется добавить больше JavaScript.

Читайте также: Стилизация полосы прокрутки в CSS

Основные термины

Пользовательские полосы прокрутки отображаются с префиксом поставщика -webkit; так они определяются в браузерах, использующих механизм рендеринга Webkit и Blink. На картинке ниже зеленым выделен бегунок, оранжевым – дорожка.

-webkit-scrollbar состоит из семи различных псевдоэлементов, которые вместе составляют полный элемент полосы прокрутки:

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

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

Примеры пользовательской настройки полосы прокрутки

Сначала создайте файлы index.html и style.css и откройте текущий каталог в редакторе кода. В файл index.html поместите следующий код:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Customize the Browser's Scrollbar with 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>

Во-первых, в этом файле мы устанавливаем ширину, высоту и фоновый цвет класса .scrollbar (width, height, background-color соответственно), затем мы определяем overflow-y: scroll, чтобы получить вертикальную полосу прокрутки. Параметр min-height: 450px в классе .force-overflow, чтобы полоса прокрутки появилась.

Взгляните на файл styles.css:

.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;
}

В результате мы получим такую полосу:

Давайте используем псевдоэлемент scrollbar для создания пользовательской полосы прокрутки. Он изменит стандартную ширину полосы до 6 пикселей, а затем установит цвет фона на #F5F5F5.

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

Как вы знаете, полоса прокрутки содержит дорожку, кнопку и бегунок (track, button и thumb). Попробуем придать бегунку стильный вид. Мы используем для этого псевдоэлемент с префиксом -webkit (например, ::-webkit-scrollbar-thumb) и установим фоновый цвет полосы прокрутки.

#style-1::-webkit-scrollbar-thumb {
    background-color: #000000;
}

После этого полоса прокрутки выглядит так:

Теперь давайте используем в scrollbar-track псевдоэлемент box-shadow, чтобы сделать добавить контраст между полосой прокрутки и бегунком.

#style-1::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

Заключение

В этой статье мы рассмотрели следующие вопросы:

  • Пользовательские полосы прокрутки уже не редкость. Вы можете встретить их на крупных сайтах и ​​в блогах, особенно в личных портфолио.
  • Существует множество плагинов jQuery, которые помогут вам изменить полосу прокрутки, но они требуют дополнительного кода JavaScript.
  • Пользовательские полосы прокрутки отображаются через префикс -webkit.
  • Кроме того, мы выяснили, из чего состоит базовая структура полосы прокрутки.

CSS позволяет легко стилизовать прокрутку, но такие полосы выглядят немного грубо. Однако операционные системы типа Windows, OS X и Linux предоставляют собственные стили для полосы прокрутки. Это, в свою очередь, может привести к нежелательным результатам, конфликтам и несоответствиям внутри вашего проекта. Помните по принципе KISS (keep it simple, stupid), не делайте свой код слишком причудливым.

Примечание: Полный код этого руководства можно найти на CodePen.

Tags: ,

Добавить комментарий