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

Почему стоит кастомизировать скроллбары?

  • Улучшение UX: Стильные и ненавязчивые скроллбары делают навигацию по сайту более приятной. Например, тонкие полосы прокрутки идеально подходят для минималистичных дизайнов.
  • Соответствие дизайну: Кастомные скроллбары помогают поддерживать единый стиль сайта, будь то цветовая палитра или общая эстетика.
  • Кроссбраузерная уникальность: Несмотря на различия в поддержке стилей скроллбаров между браузерами, современные CSS-свойства позволяют добиться единообразия.

Основы стилизации скроллбаров

Для кастомизации скроллбаров чаще всего используются псевдоэлементы ::-webkit-scrollbar, которые поддерживаются в браузерах на основе WebKit и Blink (Chrome, Edge, Opera, Samsung Internet). Для Firefox применяются стандартные свойства scrollbar-width и scrollbar-color. Это позволяет охватить большинство современных браузеров.

Пример минималистичного скроллбара

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

1. Настройка ширины и фона трека:

  • ::-webkit-scrollbar задает общую ширину скроллбара.
  • ::-webkit-scrollbar-track определяет фон полосы прокрутки.

2. Стилизация ползунка:

  • ::-webkit-scrollbar-thumb отвечает за внешний вид движущегося элемента (ползунка).
  • Можно добавить border-radius для скругления углов и эффект :hover для интерактивности.

3. Свойства для браузеров с частичной поддержкой:

  • Используйте scrollbar-width: thin для тонкого скроллбара.
  • Свойство scrollbar-color задает цвета ползунка и трека.

Сравните стандартный скролл:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


И стилизованный:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Инструменты для создания скроллбаров

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

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

 

Несколько советов по применению кастомного скроллбара

  • Не переусердствуйте с дизайном: Слишком яркие или сложные скроллбары могут отвлекать пользователей. Стремитесь к простоте и функциональности.
  • Тестируйте на разных устройствах: Убедитесь, что скроллбары хорошо выглядят и работают как на десктопах, так и на мобильных устройствах.
  • Обеспечьте доступность: Убедитесь, что скроллбары имеют достаточный контраст (соотношение не менее 3:1) и размер сенсорной области не менее 44 пикселей для удобства взаимодействия.