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

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

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

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

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

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

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

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

html::-webkit-scrollbar { width: 16px; height: 16px;
} html::-webkit-scrollbar-thumb { background: #434343; border-radius: 16px; box-shadow: inset 2px 2px 2px hsla(0,0%,100%,.25),inset -2px -2px 2px rgba(0,0,0,.25);
} html::-webkit-scrollbar-track { background: linear-gradient(90deg,#434343,#434343 1px,#111 0,#111);
}

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

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

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

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

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

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

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

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

Посмотрите данный пример в полноэкранном режиме здесь.

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

Наблюдения

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

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

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

#fake-window::-webkit-scrollbar { width: 16px; height: 16px;
}

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

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

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

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

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

::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement { display: none;
}

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

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

#fake-window::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-color, #3B82F6);
} #fake-window::-webkit-scrollbar-track { background: var(--scrollbar-track-color, #A1A1AA);
} #fake-window::-webkit-scrollbar-button { background: var(--scrollbar-button-color, #3F3F46);
} #fake-window::-webkit-scrollbar-corner { background: var(--scrollbar-corner-color, #FFFFFF);
}

Дальнейшие исследования

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

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

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

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

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

html::-webkit-scrollbar { display: none;
}

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

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

Автор: Estee Tey

Источник: esteetey.dev

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен