19.01.2022

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

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

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

Полоса прокрутки по умолчанию смотрится неплохо, но может быть и лучше. Возьмем рекомендацию профессионалов. Вот пример уникальной полосы прокрутки на CSSTricks.com:

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

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

Создание трюков с полосой прокрутки CSS

Как я уже гласила ранее, вы можете перемещаться по интерфейсу, просто используя Browser Inspector. Итак, давайте создадим это! Вот шаги для проверки полосы прокрутки:

Ознакомьтесь с элементом html. Тега scrollbar не существует. Полоса прокрутки не является определенным элементом HTML.

Чтобы выяснить, как оформлена полоса прокрутки, отфильтруйте «scrollbar» на вкладке стилей.

Вы увидите несколько псевдоэлементов, которые употребляются для стилизации полосы прокрутки.

Вот подготовительный просмотр того, как будет выглядеть ваш инспектор.

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

На вкладке стилей вы сможете найти соответствующие правила для стилизации полосы прокрутки.

CSS

Если я просто скопирую эти стили и использую их для очень длинноватой HTML-страницы, полоса прокрутки будет выглядеть так, как в CSSTricks!

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

Как стилизовать полосу прокрутки

Полоса прокрутки CSS Tricks употребляет 3 псевдо-элемента:

::-webkit-scrollbar

::-webkit-scrollbar-thumb

::-webkit-scrollbar-track

Вот обычная диаграмма, изображающая 3 части полосы прокрутки:

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

Кроме этих 3 псевдоэлементов, есть еще 4 части полосы прокрутки, которые вы сможете стилизовать. Согласно MDN Web Docs, существует 7 псевдоэлементов, которые вы сможете использовать для стилизации полосы прокрутки.

::-webkit-scrollbar — вся полоса прокрутки.

::-webkit-scrollbar-thumb — перетаскиваемый маркер прокрутки.

::-webkit-scrollbar-track — дорожка (индикатор выполнения) полосы прокрутки, где сероватая полоса находится поверх белой полосы.

::-webkit-scrollbar-button — кнопки на полосе прокрутки (стрелки, указывающие ввысь и вниз, которые прокручивают одну строчку за раз).

::-webkit-scrollbar-track-piece — часть дорожки (индикатор выполнения), не покрытая регулировкой.

::-webkit-scrollbar-corner — нижний угол полосы прокрутки, где встречаются горизонтальная и вертикальная полосы прокрутки. Нередко это правый нижний угол окна браузера.

::-webkit-resizer — перетаскиваемый маркер конфигурации размера, который появляется в нижнем углу неких элементов.

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

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

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

Поглядите данный пример в полноэкранном режиме тут.

Важный совет по использованию полосы прокрутки! При нажатии кнопки «Экспорт в CSS» стили элемента копируются в буфер обмена. После этого вы сможете открыть пустой код и просто воткнуть стили прямо на вкладку CSS, чтоб увидеть волшебство. Не забудьте установить высоту элемента body очень огромное значение, например, height: 3000px;чтобы было переполнение содержимого для возникновения полосы прокрутки.

Наблюдения

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

Когда вы меняете …

Scrollbar Height -> ширина вертикальной полосы прокрутки меняется.

Scrollbar Width -> ширина горизонтальной полосы прокрутки меняется.

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

Стиль селектора псевдоэлемента:

CSS

2. Кнопки полосы прокрутки

Вы сможете скрыть или показать кнопки полосы прокрутки. Если вы их показываете, вы сможете выбрать отображение 1 или 2 кнопок.

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

Несмотря на то что гораздо чаще можно увидеть полосу прокрутки только с одинарными клавишами со стрелками на обоих ее концах (так как это естественное поведение), если вы примените стиль ::—webkit-scrollbar-button, вы сможете установить по две кнопки с каждой стороны.

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

Чтоб обеспечить отображение только одной кнопки с каждой стороны полосы прокрутки, нужно применить следующий стиль.

CSS

3. Раскраска частей полосы прокрутки

Большая часть частей полосы прокрутки можно раскрасить персонально.

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

CSS

Последующие исследования

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

Вот очень обычной пример, у которого есть только горизонтальная полоса прокрутки, а каретка — это анимационный кот! Значок взят из SVG-изображения Gowee nyan cat на Github.

Еще одна заслуживающая упоминания полоса прокрутки — полоса прокрутки в портфолио Шона.

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

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

Несмотря на то что эта статья посвящена тому, чтобы выделить ваш сайт с помощью пользовательской полосы прокрутки, если по какой-нибудь причине вам не нравится, когда интерфейс полосы прокрутки занимает зрительное пространство на веб-сайте, или вы желаете, чтобы веб-сайт выглядел одинаково как на настольном компьютере, так и на мобильном устройстве (сайты не показывают полосы прокрутки по умолчанию в мобильных браузерах), вы сможете установить display:none для псевдоэлемента ::-webkit-scrollbar.

CSS

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

Вот и все, ребята! Спасибо за чтение, надеюсь, вам приглянулась статья!

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

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

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