a11y.skipToMainContent
1

CSS Scrollbar Styler

Дизайн пользовательских полос прокрутки визуально — ширина, цвета трека и большого пальца, состояние наведения и радиус — затем скопируйте WebKit и Firefox CSS.

Track radius (optional)

The ::-webkit-scrollbar pseudo-elements style the scrollbar in Chrome, Edge, and Safari. Firefox does not support them and instead uses thescrollbar-width / scrollbar-color fallback included in the output.

Preview (scroll the box)

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use Scrollbar Styler

  1. Установите ширину полосы прокрутки и цвета дорожки, большого и большого пальца.
  2. Выберите большой палец границы-радиус и необязательно вокруг трассы.
  3. Прокрутите окно предварительного просмотра в реальном времени, чтобы проверить внешний вид в браузере WebKit.
  4. Нажмите Copy CSS, чтобы скопировать правила WebKit и Firefox.

Что такое имя?

Этот инструмент создает CSS для пользовательской панели прокрутки из простых визуальных элементов управления. Установите ширину полосы прокрутки, цвета дорожки и большого пальца, цвет зависания большого пальца, border-radius и дополнительный закругленный трек. Прокручиваемые обновления превью в прямом эфире, чтобы вы могли увидеть результат перед копированием.

Выход включает в себя как блок псевдоэлементов WebKit (::-webkit-scrollbar, так и его части трека, большого и большого пальца), используемые Chrome, Edge и Safari, и запасной вариант scrollbar-width / scrollbar-color, который понимает Firefox. Все работает в вашем браузере.

Advertisement

FAQ

Почему превью не выглядит в стиле Firefox?
Firefox не поддерживает псевдоэлементы WebKit::-webkit-scrollbar. Вместо этого он использует ширину полосы прокрутки и обратный цвет полосы прокрутки, который допускает только тонкую или автоширину и цветовую пару большого пальца / дорожки, которые включены в скопированный CSS.
Как применить скопированный CSS к определенному элементу?
Выход нацелен на класс .scrollbox. Добавьте этот класс к элементу прокрутки, который вы хотите стилизовать, или замените .scrollbox своим собственным селектором, прежде чем вставлять его в таблицу стилей.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Scrollbar Styler on Wikipedia·Developer Tools on Wikipedia·Scrollbar Styler on Britannica

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement