Сделайте свой сайт особенным с пользовательским скроллбаром
Полоса прокрутки по умолчанию выглядит неплохо, но может быть и лучше. Возьмем рекомендацию экспертов. Вот пример уникальной полосы прокрутки на CSSTricks.com:
Эта полоса прокрутки подходит для темной темы веб-сайта гораздо больше, чем полоса прокрутки по умолчанию.
Создание трюков с полосой прокрутки CSS
Содержание статьи:
Как я уже говорила ранее, вы можете перемещаться по интерфейсу, просто используя Browser Inspector. Итак, давайте сделаем это! Вот шаги для проверки полосы прокрутки:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Ознакомьтесь с элементом html. Тега scrollbar не существует. Полоса прокрутки не является конкретным элементом HTML.
Чтобы узнать, как оформлена полоса прокрутки, отфильтруйте «scrollbar» на вкладке стилей.
Вы увидите несколько псевдоэлементов, которые используются для стилизации полосы прокрутки.
Вот предварительный просмотр того, как будет выглядеть ваш инспектор.
На вкладке стилей вы можете найти соответствующие правила для стилизации полосы прокрутки.
CSS 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); }
1234567891011121314 | 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 псевдо-элемента:
::-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 — перетаскиваемый маркер изменения размера, который появляется в нижнем углу некоторых элементов.
Некоторые из этих описаний может быть трудно визуализировать. Вот диаграмма, которая поможет вам в этом.
Для плавного введения в то, как можно использовать некоторые из этих псевдоэлементов, я создал пример с полосой прокрутки, чтобы вы могли настроить простую пользовательскую полосу прокрутки и экспортировать с ней. Найдите время, чтобы поиграть с настройками, для понимания, как работают псевдоэлементы.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Посмотрите данный пример в полноэкранном режиме здесь.
Важный совет по использованию полосы прокрутки! При нажатии кнопки «Экспорт в CSS» стили элемента копируются в буфер обмена. После этого вы можете открыть пустой код и просто вставить стили прямо на вкладку CSS, чтобы увидеть волшебство. Не забудьте установить высоту элемента body очень большое значение, например, height: 3000px;чтобы было переполнение содержимого для появления полосы прокрутки.
Наблюдения
1. Ширина полосы прокрутки
Когда вы меняете …
Scrollbar Height -> ширина вертикальной полосы прокрутки изменяется.
Scrollbar Width -> ширина горизонтальной полосы прокрутки изменяется.
Стиль селектора псевдоэлемента:
CSS #fake-window::-webkit-scrollbar { width: 16px; height: 16px; }
1234 | #fake-window::-webkit-scrollbar { width: 16px; height: 16px;} |
2. Кнопки полосы прокрутки
Вы можете скрыть или показать кнопки полосы прокрутки. Если вы их показываете, вы можете выбрать отображение 1 или 2 кнопок.
Хотя гораздо чаще можно увидеть полосу прокрутки только с одинарными кнопками со стрелками на обоих ее концах (поскольку это естественное поведение), если вы примените стиль ::—webkit-scrollbar-button, вы можете установить по две кнопки с каждой стороны.
Это поведение может отличаться в зависимости от версии вашего браузера Chromium, а также от элемента, к которому вы применяете стиль. Например, если вы примените тот же стиль в codepen, вы не увидите двойную кнопку, но если вы примените его к простой странице html и откроете ее на локальном компьютере, вы увидите двойную кнопку.
Чтобы обеспечить отображение только одной кнопки с каждой стороны полосы прокрутки, необходимо применить следующий стиль.
CSS ::-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; }
123456 | ::-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. Раскраска частей полосы прокрутки
Большинство частей полосы прокрутки можно раскрасить индивидуально.
CSS #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); }
123456789101112131415 | #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.
CSS html::-webkit-scrollbar { display: none; }
123 | html::-webkit-scrollbar { display: none;} |
Вы по-прежнему сможете прокручивать веб-страницу, только вы не увидите пользовательского интерфейса полосы прокрутки. В большинстве случаев я не рекомендую полностью отключать прокрутку.
Вот и все, ребята! Спасибо за чтение, надеюсь, вам понравилась статья!
Автор: Estee Tey
Источник: webformyself.com