Перейти до вмісту
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 для смуги прокручування генерується повністю у вашому браузері — ніщо з того, що ви вводите або вибираєте, ніколи не залишає ваш пристрій.