⭐ 0
🔍
Текст Зображення PDF та Документи Аудіо Музика Електросхемотехніка Час Корисні утиліти Валідатори Езотерика Ігри

Генератор CSS-скролбарів

Налаштуйте ширину, колір треку, повзунка й наведення на повзунок скролбара — і побачте реальний результат WebKit поруч із реальним результатом Firefox, двох по-справжньому різних систем браузерів.

10px
8px

Стилізовано псевдоелементами ::-webkit-scrollbar — цей блок рендериться власним рушієм вашого браузера, якщо це Chrome, Safari чи Edge.

Стилізовано властивостями Firefox scrollbar-width і scrollbar-color. Інші браузери ігнорують їх і показують тут власний типовий скролбар — відкрийте цю сторінку у Firefox, щоб побачити реальний результат.

У Firefox немає окремого кольору наведення, радіуса повзунка чи незалежного стилю треку — лише scrollbar-width, тут змаплений з обраної товщини на реальне ключове слово: thin

Опрацювання... 0%

Результат

Chrome, Safari та Edge стилізують скролбари родиною псевдоелементів ::-webkit-scrollbar: окремі правила для треку, повзунка та стану наведення повзунка, плюс точна в пікселях ширина й радіус кутів повзунка. Firefox повністю ігнорує все це і натомість читає дві стандартні властивості, scrollbar-width і scrollbar-color, які згодом увійшли до специфікації CSS Scrollbars. Це не два діалекти однієї функції — це два різні набори можливостей із різною стелею, і більшість генераторів скролбарів мовчки замовчують цей розрив, показуючи лише результат WebKit. Цей — ні.

Задайте ширину, колір треку, колір повзунка, колір наведення й радіус кутів повзунка один раз — і інструмент побудує два набори правил із тих самих значень. Блок WebKit прив'язує ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb та його стан :hover до лівого демо-блоку, тож те, що ви там бачите, — це точно те, що відрендерять Chrome, Safari та Edge — власний реальний рушій браузера, а не імітований оверлей. Блок Firefox задає scrollbar-width і scrollbar-color на правому демо-блоці, використовуючи власний рушій саме цього браузера, тому блок виглядає інакше лише тоді, коли сторінка справді відкрита у Firefox; у браузері на WebKit там показується власний типовий скролбар, і інструмент чесно про це повідомляє, замість того щоб підробляти вигляд Firefox позиченими пікселями.

Мапінг ширини — найяскравіший приклад розриву: scrollbar-width у Firefox приймає лише ключові слова auto, thin або none — ніколи точну цифру в пікселях. Цей генератор чесно мапить обрану ширину (8px і менше стає thin, усе ширше — auto) і показує отримане ключове слово поруч із повзунком, замість того щоб вигадувати неіснуючий піксельно точний результат для Firefox. У Firefox також немає способу задати окремий колір наведення, незалежний радіус кутів повзунка чи колір треку, що не є просто другим значенням scrollbar-color, — це реальні, постійні обмеження платформи, а не недогляди цього інструменту.

Скопіюйте об'єднаний блок CSS — і обидва набори правил подорожують разом, кожен під власним коментарем, готові вставити у стиль як є. Усе рендериться й оновлюється у вашому власному браузері під час перетягування повзунків — без завантажень, без акаунта, без звернень до сервера, а після завантаження сторінки інструмент працює й офлайн.

🛡️
Локальна безпека (Browser)

Дані не залишають ваш пристрій. Конвертація відбувається на клієнті в межах браузера. Безпека гарантована.

Нюанси та Формати

  • Спільні контроли — ширина, колір треку, колір повзунка, колір наведення, радіус кутів повзунка — керують обома рушіями з тих самих значень.
  • Чесне відображення scrollbar-width: Firefox підтримує лише thin, auto чи none, тож обране вами точне значення в пікселях мапиться на найближче реальне ключове слово і показується поруч із повзунком.
  • Об'єднаний, готовий до копіювання CSS-вивід із правилами псевдоелементів WebKit і стандартними властивостями Firefox, з чіткими коментарями.

Наші переваги

✓ Два живі демо-блоки рендерять власний реальний скролбар кожного рушія — блок WebKit завжди показує справжній результат у Chrome, Safari та Edge, без підробленого рендеру.
✓ Розрив можливостей Firefox не приховано, а показано: кольору наведення, радіуса повзунка й окремого стилю треку в Firefox просто не існує, і інструмент чесно про це каже, а не вдає протилежне.
✓ Один рядок CSS для копіювання містить обидва набори правил разом із коментарем про фолбек, готовий вставити як є.

Сценарії використання

  • • Стилізуйте скролбар бічної панелі дашборду під кольори бренду, одразу бачачи, наскільки це стилювання спрацює у Firefox, перш ніж викочувати в продакшн.
  • • Отримайте чесне ключове слово scrollbar-width для Firefox під обрану товщину, замість того щоб вгадувати, thin це чи auto.
  • • Скопіюйте один блок CSS, що несе і правила псевдоелементів WebKit, і стандартні властивості Firefox, кожне з чітким коментарем, прямо у стиль.