В этой статье мы погрузимся в мир полос прокрутки. Я знаю, это звучит не слишком гламурно, но поверьте мне, хорошо оформленная страница идет рука об руку с соответствующей полосой прокрутки. Старомодная хромированная полоса прокрутки просто не подходит.
Мы рассмотрим мельчайшие детали полосы прокрутки, а затем рассмотрим несколько интересных примеров.
Компоненты полосы прокрутки
Это скорее освежение, на самом деле. Есть куча постов прямо здесь, на CSS-Tricks которые углубляются в детали, когда дело доходит до пользовательского стиля полосы прокрутки в CSS.
Чтобы стилизовать полосу прокрутки, вы должны быть знакомы с анатомией полосы прокрутки. Взгляните на эту иллюстрацию:
Здесь следует помнить о двух основных компонентах:
- Ассоциация трек это фон под полосой.
- Ассоциация большой палец руки это часть, которую пользователь щелкает и перетаскивает.
Мы можем изменить свойства всей полосы прокрутки, используя префикс поставщика::-webkit-scrollbar селектор. Мы можем задать полосе прокрутки фиксированную ширину, цвет фона, закругленные углы… многое другое! Если мы настраиваем основную полосу прокрутки страницы, мы можем использовать ::-webkit-scrollbar непосредственно в элементе HTML:
html::-webkit-scrollbar {
/* Style away! */
}Если мы настраиваем поле прокрутки, это результат overflow: scroll, то мы можем использовать ::-webkit-scrollbar вместо этого элемента:
.element::-webkit-scrollbar {
/* Style away! */
}Вот краткий пример, который стилизует полосу прокрутки HTML-элемента так, чтобы она была широкой с красным фоном:
Что, если мы хотим изменить только ползунок или дорожку полосы прокрутки? Как вы уже догадались — для этих двух у нас есть специальные префиксные псевдоэлементы: ::-webkit-scrollbar-thumb и ::-webkit-scrollbar-track, соответственно. Вот идея того, что возможно, когда мы собираем все эти вещи вместе:
Хватит причесываться! Я хочу показать вам три степени пользовательского стиля полосы прокрутки, а затем открыть большую витрину примеров, взятых из Интернета для вдохновения.
Простые и стильные полосы прокрутки
Пользовательская полоса прокрутки может быть минимальной. Я собрал группу примеров, которые слегка меняют внешний вид, будь то небольшое изменение цвета бегунка или трека или легкая стилизация фона.
Как видите, нам не нужно сходить с ума, когда дело касается стиля полосы прокрутки. Иногда достаточно небольшого изменения, чтобы улучшить общее впечатление пользователя с помощью полосы прокрутки, которая соответствует общей теме.
Крутые привлекательные полосы прокрутки
Но давайте признаем: весело немного переборщить и проявить творческий подход. Вот несколько странных и уникальных полос прокрутки, которых в некоторых случаях может быть «слишком много», но они точно привлекают внимание.
Еще…
Как насчет того, чтобы покрутить полосу прокрутки в поезде для большого пальца и дорожки для, ну, дорожки!
