Генератор CSS-полосы прокрутки

Замените серую полосу прокрутки по умолчанию версией в цветах вашего сайта: настройте ширину, цвета и скругления, посмотрите результат в предпросмотре и скопируйте готовый CSS-код. Все вычисления выполняются локально в вашем браузере.

Примеры:

Ширина: 10px

Скругление: 8px

Цвет дорожки

Цвет ползунка

Цвет при наведении

Строка прокручиваемого содержимого № 1 — прокрутите, чтобы увидеть полосу.

Строка прокручиваемого содержимого № 2 — прокрутите, чтобы увидеть полосу.

Строка прокручиваемого содержимого № 3 — прокрутите, чтобы увидеть полосу.

Строка прокручиваемого содержимого № 4 — прокрутите, чтобы увидеть полосу.

Строка прокручиваемого содержимого № 5 — прокрутите, чтобы увидеть полосу.

Строка прокручиваемого содержимого № 6 — прокрутите, чтобы увидеть полосу.

Строка прокручиваемого содержимого № 7 — прокрутите, чтобы увидеть полосу.

Строка прокручиваемого содержимого № 8 — прокрутите, чтобы увидеть полосу.

Строка прокручиваемого содержимого № 9 — прокрутите, чтобы увидеть полосу.

Строка прокручиваемого содержимого № 10 — прокрутите, чтобы увидеть полосу.

Строка прокручиваемого содержимого № 11 — прокрутите, чтобы увидеть полосу.

Строка прокручиваемого содержимого № 12 — прокрутите, чтобы увидеть полосу.

В предпросмотре используются свойства ::-webkit-scrollbar (Chrome, Edge, Safari) и scrollbar-color (Firefox); результат может немного отличаться в зависимости от вашего браузера.

CSS-код

.byteryo-custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #8b5cf6 #1e1e2e;
}

.byteryo-custom-scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.byteryo-custom-scrollbar::-webkit-scrollbar-track {
  background: #1e1e2e;
  border-radius: 8px;
}

.byteryo-custom-scrollbar::-webkit-scrollbar-thumb {
  background: #8b5cf6;
  border-radius: 8px;
}

.byteryo-custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #a78bfa;
}

Как это работает

Единого стандартного CSS-свойства для оформления полосы прокрутки не существует: браузеры на основе Chromium (Chrome, Edge, Safari) используют псевдоэлементы ::-webkit-scrollbar, а Firefox — свойства scrollbar-width и scrollbar-color. Инструмент генерирует оба варианта сразу, в CSS-блоке, привязанном к классу, чтобы результат применялся только к нужному контейнеру, а не ко всей странице.

Как применить этот код к моему контейнеру?

Скопируйте сгенерированный CSS, переименуйте класс byteryo-custom-scrollbar в соответствии с вашими правилами именования, а затем добавьте этот класс HTML-элементу, у которого нужно изменить полосу прокрутки (например, div с overflow: auto или overflow: scroll).

Будет ли результат одинаковым во всех браузерах?

Нет: Firefox поддерживает только ширину (тонкая или автоматическая) и цвета через scrollbar-color, без скруглений и отдельного цвета при наведении, тогда как браузеры на основе Chromium позволяют настроить оформление тоньше. Сгенерированный код даёт наилучший возможный результат для каждого движка, но небольшие визуальные различия между браузерами остаются нормой.

CSS-код составляется целиком в вашем браузере: во время генерации никакие данные не отправляются на сервер.