Стилизация полосы прокрутки с помощью ::-webkit-scrollbar
Настраивайте внешний вид полосы прокрутки с помощью псевдоэлементов webkit и свойства scrollbar-color.
«Стилизация полосы прокрутки с помощью ::-webkit-scrollbar» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Обзор стилизации полос прокрутки
Браузеры отображают стандартные полосы прокрутки, которые отличаются в разных операционных системах. CSS позволяет настраивать их внешний вид с помощью нестандартных псевдоэлементов WebKit и современных стандартных свойств.
::-webkit-scrollbar
Корневой псевдоэлемент всей полосы прокрутки. Задайте ширину (для вертикальной полосы) и высоту (для горизонтальной):
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>::-webkit-scrollbar-track
Дорожка — это фоновый канал, вдоль которого перемещается бегунок:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>::-webkit-scrollbar-thumb
Бегунок — это перетаскиваемый индикатор прокрутки:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Полная реализация пользовательской полосы прокрутки
Полная реализация пользовательской полосы прокрутки:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Современный стандарт: scrollbar-color
scrollbar-color — стандартизированное свойство, поддерживаемое Firefox. Оно задаёт цвета бегунка и дорожки в одном объявлении:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Современный стандарт: scrollbar-width
scrollbar-width управляет размером полосы прокрутки с помощью ключевых слов:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Кроссбраузерная стилизация полос прокрутки
Для полной поддержки в разных браузерах используйте оба подхода:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Скрытие полос прокрутки с сохранением прокрутки
Сделайте элемент прокручиваемым, но визуально скройте полосу прокрутки:
<div class="hide-scrollbar">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Полосы прокрутки в тёмном режиме
Используйте свойство CSS color-scheme, чтобы получить нативные тёмные полосы прокрутки ОС без пользовательской стилизации:
<p>Uses OS-native scrollbar theme via <code>color-scheme</code>.</p>Напоминание о доступности
Не делайте полосы прокрутки слишком маленькими или невидимыми, если из-за этого становится трудно понять, что содержимое можно прокручивать. Скрытые полосы прокрутки допустимы в интерфейсах, ориентированных прежде всего на сенсорное управление, но на компьютерах они могут сбивать с толку.
Быстрая проверка
Какое стандартизированное свойство CSS задаёт цвета полосы прокрутки и поддерживается в Firefox?
Итоги
Настраивайте полосы прокрутки с помощью псевдоэлементов ::-webkit-scrollbar (WebKit) и стандартных свойств scrollbar-color/scrollbar-width (Firefox и современные браузеры). Используйте оба подхода для полной кроссбраузерной поддержки. Используйте scrollbar-width: none вместе с эквивалентным свойством WebKit, чтобы скрыть полосы прокрутки и сохранить возможность прокрутки.
Изучай CSS с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 40
- Уроки
- 159
Часто задаваемые вопросы
Урок «Стилизация полосы прокрутки с помощью ::-webkit-scrollbar» бесплатный?
Да — полный текст урока «Стилизация полосы прокрутки с помощью ::-webkit-scrollbar» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Стилизация полосы прокрутки с помощью ::-webkit-scrollbar»?
Настраивайте внешний вид полосы прокрутки с помощью псевдоэлементов webkit и свойства scrollbar-color. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Стилизация полосы прокрутки с помощью ::-webkit-scrollbar»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- overflow: hidden, scroll, auto, clip
- scroll-behavior: smooth
- scroll-snap-type и scroll-snap-align
- Стилизация полосы прокрутки с помощью ::-webkit-scrollbar