02.08.2021
45386b63e4aa4687445c8f4b1f192b18

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

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

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

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

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

Вступление

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

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

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

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

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

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

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

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

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

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

CSS

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

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

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

CSS

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

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

CSS

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

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

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

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

CSS

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

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

CSS

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

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

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

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

CSS

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

CSS

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

CSS

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

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

Пример 1

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

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

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

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

Для окон все малость иначе.

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

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

CSS

Нужно добавить border-radius как для дорожки, так и для бегунка, так как это не сработает c ::webkit-scrollbar.

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

CSS

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

Пример 2

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

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

CSS

Пример 3

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

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

CSS

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

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

Пример 4

В этом примере мы желаем, чтобы ползунок полосы прокрутки имел смещение со всех сторон. Так как невозможно использовать padding со свойствами полосы прокрутки, нам необходимо обойти это, используя границы CSS и background-clip.

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

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

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

CSS

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

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

CSS

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

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

CSS

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

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

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

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

CSS

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

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

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

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

CSS

Препядствия доступности

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

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

Цвет ползунка чуть заметен. Это не очень хорошо для юзера, если будет использоваться прокрутка с помощью ползунка.

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

По материалам webformyself.com

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *