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

Настраиваемые полосы прокрутки становятся все более популярными в наши дни, и я хочу взглянуть на эту тему. Есть разные причины для настройки полосы прокрутки. Например, полоса прокрутки по умолчанию может сделать пользовательский интерфейс приложения несовместимым с различными операционными системами, поэтому вам нужно использовать один и тот же стиль для полосы прокрутки.

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

Первое, что я хочу объяснить, — это компоненты или части полосы прокрутки. Полоса прокрутки содержит дорожку и ползунок. Вот графическое изображение, показывающее их:

Дорожка — это основа полосы прокрутки, а ползунок — это то, что пользователь перетаскивает для прокрутки страницы или раздела.

Следует иметь в виду одну важную вещь: полосу прокрутки можно расположить горизонтально или вертикально, в зависимости от дизайна. Кроме того, он может измениться при работе с многоязычным веб-сайтом, который работает как слева направо (LTR), так и справа налево (RTL).

Настройка дизайна долосы прокрутки

Раньше настраиваемая полоса прокрутки использовалась только для webkit, поэтому она не использовалась в Firefox и IE. Теперь у нас есть новый синтаксис, который работает только в Firefox и облегчит нашу жизнь при полной поддержке. Я пройдусь по старому синтаксису Webkit, а затем по новому.

Старый синтаксис

Ширина полосы прокрутки

Во-первых, нам нужно определить размер полосы прокрутки. Это может быть ширина вертикальных полос прокрутки и высота горизонтальных.

CSS .section :: — полоса прокрутки webkit {width: 10px; }

С помощью этого набора мы можем смоделировать саму полосу прокрутки.

Дорожка полосы прокрутки

Это сердце полосы прокрутки. Мы можем стилизовать его, добавив цвета фона, тени, радиус границы.

CSS .section :: — webkit-scrollbar-track {цвет фона: темно-серый; }

Ползунок полосы прокрутки

Когда у нас есть готовая база полосы прокрутки, нам нужно стилизовать курсор полосы прокрутки. Это важно, потому что пользователь будет перетаскивать этот ползунок, чтобы взаимодействовать с полосой прокрутки.

CSS .section :: — webkit-scrollbar-thumb {box-shadow: inset 0 0 6px rgba (0, 0, 0, 0.3); }

Поэтому мы рассмотрели старый способ стилизации настраиваемой полосы прокрутки в CSS. Давайте исследуем новый синтаксис.

Новый синтаксис

Ширина полосы прокрутки

Как упоминалось выше, это определение ширины полосы прокрутки и наиболее важных для нас значений: auto и thin. К сожалению, мы не можем определить конкретное число, как в синтаксисе webkit.

CSS .section {ширина полосы прокрутки: тонкая; }

Цвет полосы прокрутки

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

CSS .section {цвет полосы прокрутки: # 6969dd # e0e0e0; ширина полосы прокрутки: тонкая; }

Этот новый синтаксис очень прост, но ограничен. Мы можем применять только сплошные цвета. Мы не можем добавлять тени, градиенты, закругленные края или что-то в этом роде. Нам разрешено только настраивать цвета.

Определение области пользовательской полосы прокрутки

важно знать, где установить полосу прокрутки. Вы хотите, чтобы стиль был единообразным и работал на всех полосах прокрутки на вашем веб-сайте? Или вы хотите настроить только некоторые разделы?

Со старым синтаксисом мы можем писать селекторы, не привязывая их к элементу, и они будут применяться ко всем прокручиваемым элементам.

CSS :: — полоса прокрутки webkit {width: 10px; } :: — webkit-scrollbar-track {цвет фона: темно-серый; } :: — webkit-scrollbar-thumb {box-shadow: inset 0 0 6px rgba (0, 0, 0, 0.3); }

Однако, если вы хотите настроить только определенный раздел, вам нужно добавить элемент перед селекторами.

CSS .section :: — полоса прокрутки webkit {width: 10px; } .section :: — webkit-scrollbar-track {цвет фона: темно-серый; } .section :: — webkit-scrollbar-thumb {box-shadow: вставка 0 0 6px rgba (0, 0, 0, 0.3); }

Настройка нового синтаксиса практически такая же. Я заметил, что если вам нужен общий стиль, его следует применять к тегу html, а не к телу.

CSS html {цвет полосы прокрутки: # 6969dd # e0e0e0; ширина полосы прокрутки: тонкая; }

Я попытался добавить это в тег body, но это не сработало, как ожидалось. Теперь, когда мы знаем, как работает старый и новый синтаксис, давайте перейдем к настройке некоторых дизайнов полос прокрутки.

Настройка дизайна полосы прокрутки

Пример 1

Прежде чем мы углубимся в настройку полосы прокрутки, стоит поговорить о стиле по умолчанию в Mac OS. Вот как это выглядит:

След полосы прокрутки имеет левую и правую границу со сплошным цветом фона.

Полоса прокрутки закруглена и окружена пробелом с левой и правой сторон.

Для Windows дела обстоят немного иначе.

Вот как мы можем настроить полосу прокрутки на основе макета выше.

CSS .section :: — полоса прокрутки webkit {width: 16px; } .section :: — webkit-scrollbar-track {цвет фона: # e4e4e4; край-радиус: 100 пикселей; } .section :: — webkit-scrollbar-thumb {цвет фона: # d4aa70; край-радиус: 100 пикселей; }

Вам нужно добавить радиус кромки как к дорожке, так и к ползунку, так как это не сработает для c :: webkit-scrollbar.

С новым синтаксисом мы не можем регулировать ширину полосы прокрутки, нам просто нужно изменить цвет фона дорожки и ползунка.

Практический курс по адаптивной верстке сайта с нуля!

Пройдите курс и узнайте, как создавать современные веб-сайты на HTML5 и CSS3

CSS .section {цвет полосы прокрутки: # D4AA70 # e4e4e4; }

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

Пример 2

В этом примере дизайн немного сложнее, поскольку он содержит тени и тени это возможно? Да, мы можем применить внутренние тени и градиенты для имитации этого эффекта. Посмотрим как!

CSS .section :: — webkit-scrollbar-thumb {background-image: linear-gradient (180deg, # D0368A 0%, # 708AD4 99%); box-shadow: вставка 2px 2px 5px 0 rgba (#fff, 0.5); радиус края: 100 пикселей; }

Пример 3

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

CSS .section :: — webkit-scrollbar-thumb {border-radius: 100px; фон: # 8070D4; граница: 6px сплошной RGB (0,0,0,0.2); }

На этом же примере мы можем установить верхний и нижний пределы на ноль и получить интересный эффект для ползунка. Обратите внимание на маленькие элементы вверху и внизу слайдера.

Пример 4

В этом примере мы хотим, чтобы полоса прокрутки была смещена со всех сторон. Поскольку вы не можете использовать отступы со свойствами полосы прокрутки, вам нужно обойти это, используя границы CSS и фоновый клип.

По умолчанию, когда элемент имеет фон и границу, браузер обрезает рамку. Рассмотрим следующий пример:

CSS .button {минимальная ширина: 100 пикселей; граница: сплошная 6px # 000; размер коробки: рамка-рамка; цвет фона: # 5749d2; }

У нас есть кнопка с черной рамкой в ​​6 пикселей. Предполагая, что размер поля установлен на border-box, граница будет включена в размер кнопки. В результате граница появляется над фоном.

Теперь, когда мы применяем background-clip: content-box, фон будет появляться только вокруг содержимого.

CSS .button {минимальная ширина: 100 пикселей; граница: сплошная 6px # 000; размер коробки: коробка границы; цвет фона: # 5749d2; фоновый клип: поле содержимого; }

Надеюсь, идея понятна. Вернемся к ползунку полосы прокрутки. Чтобы смоделировать эффект, нам нужно добавить следующее:

CSS .section :: — webkit-scrollbar-thumb {border: transparent solid 5px; край-радиус: 100 пикселей; цвет фона: # 8070d4; фоновый клип: поле содержимого; }

И мы закончили.

Мы узнали, как настраивать различные дизайны полос прокрутки. Для Firefox мы можем использовать новый синтаксис, но опять же, он ограничен только толщиной и сплошными цветами.

Можно ли добавить эффекты наведения?

Да, мы можем добавить эффект наведения курсора на ползунок полосы прокрутки для старого и нового синтаксиса.

CSS / * Старый синтаксис * / .section :: — webkit-scrollbar-thumb: hover {background-color: # 5749d2; } / * Новый синтаксис * / .section {scrollbar-color: # d4aa70 # e4e4e4; переход: цвет полосы прокрутки 0,3 с, легкий выход; } .section: hover {цвет полосы прокрутки: # 5749d2; }

В новом синтаксисе мы можем добавлять переходы, а в старом — нет. Мне все равно.

Показываем полосу прокрутки, когда это необходимо

вы можете создать прокручиваемый элемент, добавив значение, отличное от visible, для свойства переполнения. Рекомендуется использовать ключевое слово auto, поскольку оно будет отображать полосу прокрутки только в том случае, если содержимое превышает свой контейнер.

CSS. Раздел {переполнение-у: авто; }

Проблемы доступности

При настройке дизайна полосы прокрутки помните, что между ползунком и полосой прокрутки должен быть хороший контраст, чтобы пользователь мог легко это заметить. Рассмотрим следующий «плохой» пример настраиваемой полосы прокрутки.

Цвет курсора еле заметен. Пользователю не очень полезно использовать прокрутку курсора.

Спасибо за прочтение!