Перейти к содержанию
TextArray1.87.0
100% локально

Генератор стилей CSS для полос прокрутки

Создавайте CSS-правила для ::-webkit-scrollbar и scrollbar-width/scrollbar-color.

Выходные данные
Связанные инструменты
Генератор CSS box-shadowИнструменты разработчика
Экстрактор переменных цвета CSSИнструменты разработчика
Генератор CSS-анимаций и переходовновоеИнструменты разработчика
i18n ключевая разницаИнструменты разработчика
Конвертер TOML в JSONИнструменты разработчика
SQL в JSONИнструменты разработчика
Генератор стилей CSS для полос прокрутки
Внешний вид полосы прокрутки браузера редко совпадает с остальным дизайном сайта. Стилизация полосы требует знания двух разных спецификаций одновременно: псевдо-элементов ::-webkit-scrollbar, которые используют Chrome, Safari и Edge, и стандартных свойств scrollbar-width и scrollbar-color, которые читает Firefox. Этот инструмент генерирует оба варианта одновременно из нескольких параметров, поэтому вы копируете один блок CSS, и все основные браузеры отображают одинаковую полосу прокрутки.
Укажите целевой селектор — body для всей страницы или класс типа .sidebar для одной области прокрутки — затем выберите ширину полосы в пикселях, цвета фона и бегунка, а также цвет бегунка при наведении. Параметр округления управляет border-radius перетаскиваемого бегунка, а отступ добавляет прозрачный промежуток между бегунком и фоном, чтобы он выглядел как плавающий элемент вместо сплошного блока. Вариант позволяет переключаться между обычной полосой браузера, тонкой версией и скрытой полосой, которая удаляет видимую часть, сохраняя возможность прокрутки.
Включение варианта для тёмного режима оборачивает вторую копию правил в блок @media (prefers-color-scheme: dark) с автоматически затемненными цветами фона и бегунка, поэтому сайт, который уже переключает темы, получит полосу прокрутки, которая переключается вместе с ним — дополнительных расчётов не требуется. Каждый параметр обновляет вывод в реальном времени по мере его изменения, а счётчик отображает количество сгенерированных блоков CSS и точный количество символов.
Всё выполняется локально в вашем браузере: никакие селекторы, цвета или CSS никогда не отправляются на сервер. Скопируйте результат прямо в вашу таблицу стилей, загрузите его как файл .txt или отправьте на вход другого инструмента для дальнейшего совершенствования.
FAQ
Почему инструмент генерирует правила как scrollbar-width, так и ::-webkit-scrollbar?
Ни одно свойство CSS не поддерживается везде. Firefox читает стандартные свойства scrollbar-width и scrollbar-color, а Chrome, Safari и Edge реагируют только на старые псевдо-элементы ::-webkit-scrollbar. Генерирование обоих вариантов означает, что одна и та же таблица стилей работает во всех браузерах.
Вариант «Скрыть» отключает прокрутку элемента?
Нет. Это только скрывает видимую полосу прокрутки и бегунок, используя scrollbar-width: none и -ms-overflow-style: none. Элемент по-прежнему прокручивается нормально с помощью колёсика мыши, трекпада или касания — содержимое просто не имеет видимой полосы прокрутки.
Что именно делает отступ бегунка?
Это добавляет прозрачный край вокруг бегунка с background-clip: padding-box, который уменьшает видимую заливку внутрь от краёв дорожки. Этот промежуток — то, что делает бегунок похожим на округлый элемент, а не на полосу, которая касается обоих сторон полосы прокрутки.
Как рассчитываются цвета для тёмного режима?
Каждый выбранный вами цвет смешивается в направлении чёрного на фиксированную величину и помещается внутри блока @media (prefers-color-scheme: dark), поэтому сайт, использующий автоматическое переключение режимов, получает пропорционально более тёмные фон и бегунок без необходимости вручную выбирать второй набор цветов.
Отправляются ли мой CSS или выбранные цвета куда-нибудь?
Нет. CSS для полосы прокрутки генерируется полностью в вашем браузере — ничто из того, что вы вводите или выбираете, никогда не покидает ваше устройство.