Генератор стилей прокрутки CSS
Создавайте кроссбраузерный CSS для пользовательской полосы прокрутки — правила WebKit ::-webkit-scrollbar-* плюс scrollbar-color/scrollbar-width Firefox — из параметров ширины, дорожки, ползунка и углового цвета с живым прокручиваемым предпросмотром.
Ввод
Ширина
Цвета
Видна только там, где вертикальная и горизонтальная полосы прокрутки встречаются.
Форма и разметка
Вставляет ползунок от дорожки с кольцом цвета дорожки, чтобы он выглядел плавающим.
Применяйте этот класс к любому элементу с overflow — каждый селектор находится в его области видимости.
Вывод
Your scrollbar will appear here.
Реально сгенерированный CSS, изолированный в Shadow DOM — прокрутите поле, чтобы увидеть его.
Прокручиваемое поле с применённым классом — замените высоту/содержимое на собственное.
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-scrollbar-style-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"widthPreset": "thin",
"customWidth": "12",
"trackColor": "#f1f5f9",
"thumbColor": "#94a3b8",
"thumbHoverColor": "#64748b",
"cornerColor": "#f1f5f9",
"trackRadius": "8",
"thumbRadius": "8",
"floatingThumb": "true",
"className": "io-scrollbar"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-scrollbar-style-generator` tool (CSS Scrollbar Style Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-scrollbar-style-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор стилей прокрутки CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что делает этот инструмент
Браузеры не согласны с тем, как стилизировать полосу прокрутки. Chrome, Safari и Edge используют набор псевдоэлементов ::-webkit-scrollbar-*; Firefox игнорирует все это и вместо этого читает два сокращённых свойства, scrollbar-width и scrollbar-color. Этот инструмент создаёт оба сразу из нескольких элементов управления — ширины, цвета дорожки, цвета ползунка, цвета при наведении, цвета угла и радиуса угла — и показывает вам реальный, прокручиваемый предпросмотр, чтобы вы могли увидеть результат перед копированием.
Как использовать
- Выберите Ширину полосы прокрутки — Тонкая, Автоматическая (переоцвеченная ширина по умолчанию браузера), пользовательское значение в пикселях или Скрыто.
- Установите цвета Дорожка, Ползунок, Ползунок при наведении и Угол.
- Отрегулируйте Радиус дорожки и Радиус ползунка и переключите Плавающий ползунок для вставки ползунка от дорожки кольцом цвета дорожки.
- Дайте ему Имя класса, затем прокрутите живой предпросмотр для проверки.
- Скопируйте CSS в вашу таблицу стилей и примените имя класса к любому элементу с
overflow: autoилиoverflow: scroll.
Почему CSS нужен и блок WebKit, и блок Firefox?
Пока нет единого стандартного API для стилизации полосы прокрутки. Браузеры на основе WebKit предоставляют полосу прокрутки как пять стилизуемых псевдоэлементов (::-webkit-scrollbar, -track, -thumb, -thumb:hover, -corner); Firefox реализует более новые, гораздо более простые свойства scrollbar-width/scrollbar-color и вообще не поддерживает псевдоэлементы WebKit. Отправка только одной части оставляет весь механизм браузера с нестилизированной полосой прокрутки по умолчанию, поэтому сгенерированный CSS всегда включает оба.
Почему Firefox не может использовать мою пользовательскую ширину в пикселях?
scrollbar-width принимает только три ключевых слова — auto, thin, none — нет свойства для точного значения в пикселях. Когда вы выбираете Пользовательская ширина, Firefox возвращается к thin, что является ближайшим доступным вариантом.
Это повлияет на полосы прокрутки в других местах на моей странице?
Нет. Каждое правило находится в области видимости под названием класса, который вы выбираете, поэтому затрагиваются только элементы, к которым вы применяете этот класс — остальная часть страницы сохраняет свою нативную полосу прокрутки.
Что если я хочу полностью скрыть полосу прокрутки?
Выберите предустановку ширины Скрыто. Она устанавливает scrollbar-width: none для Firefox и display: none для псевдоэлемента полосы прокрутки WebKit, поэтому элемент всё ещё прокручивается (колесом мыши, касанием или скриптом), но не показывает никакую дорожку или ползунок.
Что если мне нужен совершенно другой эффект прокрутки?
Для анимаций, вызываемых прокруткой, а не внешним видом полосы прокрутки, смотрите Генератор анимации прокрутки CSS. Чтобы скруглить углы самого прокручиваемого блока, а не его полосы прокрутки, используйте Генератор радиуса границы CSS.