Как убрать или стилизовать полосу прокрутки — CSS скроллбар

Скроллбар — единственный элемент интерфейса, который пользователь видит постоянно, а дизайнеры вспоминают о нём в последнюю очередь. Между тем стилизация полосы прокрутки CSS делается без JavaScript и jQuery-плагинов. В статье разберём все способы: как скрыть или убрать полосу прокрутки CSS, изменить CSS скроллбар через стандартные свойства и webkit-псевдоэлементы — с детальным контролем и живыми примерами.

Из чего состоит скроллбар

Браузеры на движке Webkit/Blink (Chrome, Edge, Opera) раскрывают внутренности скроллбара через CSS-псевдоэлементы с префиксом ::-webkit-scrollbar . Их четыре основных:

• ::-webkit-scrollbar — полоса целиком: задаёт ширину и фон
• ::-webkit-scrollbar-track — дорожка: пространство, по которому движется бегунок
• ::-webkit-scrollbar-thumb — бегунок: тот самый перетаскиваемый элемент
• ::-webkit-scrollbar-button — кнопки со стрелками вверх/вниз (их обычно скрывают)

В Firefox webkit-псевдоэлементы не работают — там используют стандарт: scrollbar-width и scrollbar-color. Оба подхода можно прописать одновременно: браузер применит только тот, что ему подходит.

Как скрыть полосу прокрутки CSS

Частая задача — убрать полосу прокрутки визуально, но оставить саму возможность прокручивать. Делается в четыре строки:

.element {
    scrollbar-width: none; /* Firefox */
}
.element::-webkit-scrollbar {
    display: none; /* Chrome, Edge, Safari */
}

Для всей страницы замените .element на body . Колёсико мыши и свайп продолжат работать — просто полоска исчезнет с экрана.

Стандартный способ: scrollbar-width и scrollbar-color

В 2018 году появилась официальная спецификация CSS Scrollbars. Она даёт два свойства без каких-либо префиксов, и уже поддерживается во всех современных браузерах: Firefox 64+, Chrome 121+, Edge 121+, Safari 15.4+.

scrollbar-width — управляет шириной полосы. Три значения:

scrollbar-width: auto;   /* по умолчанию */
scrollbar-width: thin;   /* тонкий скроллбар */
scrollbar-width: none;   /* скрыть полностью */

scrollbar-color — задаёт цвет бегунка и дорожки через пробел: сначала бегунок, потом дорожка:

/* бегунок — #18aaaa, дорожка — #f1f5f9 */
.element {
    scrollbar-color: #18aaaa #f1f5f9;
}

/* или системные цвета */
.element {
    scrollbar-color: auto;
}

Вот как это выглядит вживую — прокрутите блок:

.element {
    scrollbar-width: thin;
    scrollbar-color: #6366f1 #e0e7ff;
}

Стандартный способ — проще и кросс-браузернее, но даёт меньше контроля: нельзя задать скруглённые углы, тени или градиент на бегунке. Для тонкой стилизации нужен webkit-подход ниже.

Как изменить скроллбар CSS через webkit

Псевдоэлементы работают в Chrome, Edge и Safari. Разберём пошагово, как собрать аккуратный кастомный скроллбар с нуля.

Шаг 1 — ширина и фон полосы

.element::-webkit-scrollbar {
    width: 8px;
    background-color: #f1f5f9;
}

Шаг 2 — дорожка

::-webkit-scrollbar-track — фон вокруг бегунка. Добавим скруглённые углы и лёгкую внутреннюю тень для глубины:

.element::-webkit-scrollbar-track {
    background-color: #f1f5f9;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
}

Шаг 3 — бегунок

::-webkit-scrollbar-thumb — главный элемент. Добавим смену цвета при наведении, чтобы пользователь понял, что с ним можно взаимодействовать:

.element::-webkit-scrollbar-thumb {
    background-color: #18aaaa;
    border-radius: 4px;
}

.element::-webkit-scrollbar-thumb:hover {
    background-color: #0d9090;
}

Четыре строки — и скроллбар выглядит лучше, чем у большинства сайтов в интернете. Чтобы применить стили ко всей странице, уберите .element и используйте псевдоэлементы без дополнительных селекторов:

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: #f1f5f9;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
    background-color: #18aaaa;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #0d9090;
}

Готовые примеры CSS скроллбара

Три варианта оформления — каждый работает прямо здесь. Прокрутите любой блок, чтобы увидеть результат:

Пример 1 — полосатый бегунок

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f9f9fd;
}
::-webkit-scrollbar-thumb {
    background-color: #f2bf93;
    background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .25) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, .25) 50%,
            rgba(255, 255, 255, .25) 75%,
            transparent 75%,
            transparent);
}

Пример 2 — синий градиент

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00c6fb, #005bea);
    border-radius: 10px;
}

Пример 3 — минималистичный

::-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

Предотвращаем скачок страницы: scrollbar-gutter

Знакомая ситуация: открывается модальное окно, прокрутка страницы блокируется через overflow: hidden на body — и страница прыгает вбок на несколько пикселей. Место, которое занимал скроллбар, освободилось. Раньше это чинили магическим padding-right: 17px . Теперь есть нормальный способ:

html {
    scrollbar-gutter: stable;
}

scrollbar-gutter: stable резервирует место под скроллбар даже когда он скрыт — страница не прыгает. Если хотите зарезервировать место с обеих сторон (например, для симметрии), добавьте both-edges :

html {
    scrollbar-gutter: stable both-edges;
}