⭐ 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: окремі правила для доріжки, повзунка, його стану при наведенні, а також точна ширина в пікселях і border-radius повзунка. 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 за допомогою чужих пікселів.

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

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

Подобається цей інструмент? Думаєте, цей продукт корисний? Бачите в ньому потенціал і хочете підтримати?

🛡️
Виконується в браузері

Ваші файли та дані ніколи не залишають цей пристрій. Обробка відбувається повністю офлайн. 100% безпечно.

Прийняті формати та правила

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

Ключові переваги

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

Варіанти використання

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