Кастомизация скроллбара в 2026: Webkit vs W3C Standard

📂 Категория: CSS
🏷️ Теги:

Два пути кастомизации: Webkit vs W3C

На сегодняшний день существует два основных подхода к стилизации полос прокрутки. Они преследуют разные цели: один дает абсолютный контроль, другой — максимальную совместимость.

1. Традиционный подход: псевдоэлементы ::-webkit-scrollbar

Этот метод долгие годы был стандартом де-факто для Chrome, Safari и Edge. Он позволяет разобрать скроллбар на «запчасти» и стилизовать каждую отдельно.

Возможности: Установка точной ширины в пикселях, скругление углов (border-radius), использование теней (box-shadow), градиентов и даже сложных анимаций.

Ограничения: Нельзя установить transition для hover. Тени: номинально они есть, но так как браузер обрабатывает их заторможенно, то использовать их не получается.

Хитрый прием: С помощью сочетания border: transparent и background-clip: content-box можно создать эффект «левитирующего» ползунка, который визуально уже, чем область, на которую можно нажать. Это сохраняет удобство использования при изящном внешнем виде.

2. Современный стандарт: scrollbar-color и scrollbar-width

Это официальный стандарт W3C, который теперь поддерживается всеми браузерами, включая Firefox (который всегда игнорировал правила Webkit). Но пока поддержка браузерами далека от желаемой – на апрель 2026 составляет 82.23%.

Возможности: Вы можете задать цвет ползунка (thumb) и дорожки (track), а также выбрать один из двух режимов ширины: auto или thin.

Ограничения: Нельзя контролировать радиус скругления, добавлять отступы, скрывать стрелки и добавлять цвет hover. Скроллбар всегда будет выглядеть так, как его отрисует операционная система, но в ваших цветах.

Сравнение подходов

Возможностьscrollbar-color::-webkit-scrollbar
Точная ширина (px)❌ (только auto/thin)✅
Скругление углов❌ (системное)✅
Тени (box-shadow)❌⚠️
Градиенты❌ (только сплошной цвет)✅
Hover❌✅
Скрыть стрелки❌✅
Поддержка Firefox✅❌
Поддержка Chrome/Safari✅✅

Главная ловушка: Конфликт стандартов

Самая частая ошибка сегодня — попытка использовать оба метода одновременно для одного элемента без должной проверки.

Важно

Как только современные браузеры (Chrome 121+) видят стандартное свойство scrollbar-width или scrollbar-color, они мгновенно отключают все правила ::-webkit-scrollbar.

Если вы прописали идеальный дизайн через Webkit, а затем добавили scrollbar-width: thin для Firefox — в Chrome ваш дизайн «сломается», превратившись в стандартную тонкую полоску.

Золотое правило стилизации в 2026 году

Чтобы ваш интерфейс выглядел отлично во всех браузерах, используйте прогрессивное улучшение через проверку поддержки (@supports):

Для Firefox: Сначала устанавливаем стиль для скролла, не поддерживающего ::-webkit-scrollbar.

Для Chrome/Safari/Edge: В директиве @supports selector(::-webkit-scrollbar) отменяем стили стандартного скролла и устанавливаем детальный дизайн через ::-webkit-scrollbar.

/* Firefox */
* {
  scrollbar-color: var(--color-primary) var(--color-base-bg);
}

@supports selector(::-webkit-scrollbar) {
  /* Отключение стандартных скроллов */
  * {
    scrollbar-width: auto !important;
    scrollbar-color: unset !important;
  }

  /* Далее стили ::-webkit-scrollbar */
}

Такой подход гарантирует, что пользователи современных браузеров увидят ваш уникальный дизайн, а пользователи Firefox — аккуратную, пусть и менее детализированную, версию в общей цветовой гамме проекта.

Примеры кода

Геометричный стиль без скруглений

Системное сообщение №1 — Проверка скролла.

Системное сообщение №2 — Проверка скролла.

Системное сообщение №3 — Проверка скролла.

Системное сообщение №4 — Проверка скролла.

Системное сообщение №5 — Проверка скролла.

Системное сообщение №6 — Проверка скролла.

Системное сообщение №7 — Проверка скролла.

Системное сообщение №8 — Проверка скролла.

Системное сообщение №9 — Проверка скролла.

Системное сообщение №10 — Проверка скролла.

Показать CSS код 
/* Firefox */
.scroll-square {
  scrollbar-width: thin;
  scrollbar-color: #475569 #e2e8f0;
}

@supports selector(::-webkit-scrollbar) {
  /* Отключение стандартных скроллов */
  .scroll-square {
    scrollbar-width: auto !important;
    scrollbar-color: unset !important;
  }

  .scroll-square::-webkit-scrollbar {
    width: 0.75rem;
    height: 0.75rem;
  }
  .scroll-square::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 0;
  }
  .scroll-square::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 0;
  }
  .scroll-square::-webkit-scrollbar-thumb:hover {
    background: #1e293b;
  }
}

Эффект “острова” внутри трека

Системное сообщение №1 — Проверка скролла.

Системное сообщение №2 — Проверка скролла.

Системное сообщение №3 — Проверка скролла.

Системное сообщение №4 — Проверка скролла.

Системное сообщение №5 — Проверка скролла.

Системное сообщение №6 — Проверка скролла.

Системное сообщение №7 — Проверка скролла.

Системное сообщение №8 — Проверка скролла.

Системное сообщение №9 — Проверка скролла.

Системное сообщение №10 — Проверка скролла.

Показать CSS код 
/* Firefox */
.scroll-floating {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) white;
}

@supports selector(::-webkit-scrollbar) {
  /* Отключение стандартных скроллов */
  .scroll-floating {
    scrollbar-width: auto !important;
    scrollbar-color: unset !important;
  }

  .scroll-floating::-webkit-scrollbar {
    width: 1rem;
    height: 1rem;
  }
  .scroll-floating::-webkit-scrollbar-track {
    background: white;
    border-radius: 9999px;
  }
  .scroll-floating::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    background-clip: content-box;
    border-radius: 9999px;
    border: 4px solid transparent;
  }
  .scroll-floating::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-primary-active);
  }
}

Обычный: скруглённая линия

Системное сообщение №1 — Проверка скролла.

Системное сообщение №2 — Проверка скролла.

Системное сообщение №3 — Проверка скролла.

Системное сообщение №4 — Проверка скролла.

Системное сообщение №5 — Проверка скролла.

Системное сообщение №6 — Проверка скролла.

Системное сообщение №7 — Проверка скролла.

Системное сообщение №8 — Проверка скролла.

Системное сообщение №9 — Проверка скролла.

Системное сообщение №10 — Проверка скролла.

Показать CSS код 
/* Firefox */
.scroll-line {
  scrollbar-width: thin;
  scrollbar-color: var(--color-text-subtle) var(--color-base-bg);
}

@supports selector(::-webkit-scrollbar) {
  /* Отключение стандартных скроллов */
  .scroll-line {
    scrollbar-width: auto !important;
    scrollbar-color: unset !important;
  }

  .scroll-line::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
  }
  .scroll-line::-webkit-scrollbar-track {
    background: var(--color-base-bg);
    border-radius: 9999px;
  }
  .scroll-line::-webkit-scrollbar-thumb {
    background: var(--color-text-subtle);
    border-radius: 9999px;
  }
  .scroll-line::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
  }
  .scroll-line::-webkit-scrollbar-corner {
    background: transparent;
  }
  .scroll-line::-webkit-scrollbar-button {
    display: none;
  }
}

Градиент

Системное сообщение №1 — Проверка скролла.

Системное сообщение №2 — Проверка скролла.

Системное сообщение №3 — Проверка скролла.

Системное сообщение №4 — Проверка скролла.

Системное сообщение №5 — Проверка скролла.

Системное сообщение №6 — Проверка скролла.

Системное сообщение №7 — Проверка скролла.

Системное сообщение №8 — Проверка скролла.

Системное сообщение №9 — Проверка скролла.

Системное сообщение №10 — Проверка скролла.

Показать CSS код 
/* Firefox */
.scroll-gradient {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) var(--color-base-bg);
}

@supports selector(::-webkit-scrollbar) {
  /* Отключение стандартных скроллов */
  .scroll-gradient {
    scrollbar-width: auto !important;
    scrollbar-color: unset !important;
  }

  .scroll-gradient::-webkit-scrollbar {
    width: 0.75rem;
    height: 0.75rem;
  }
  .scroll-gradient::-webkit-scrollbar-track {
    background: var(--color-base-bg);
    border-radius: 9999px;
  }
  .scroll-gradient::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    border: 2px solid transparent;
  }
  .scroll-gradient::-webkit-scrollbar-thumb:horizontal {
    background: linear-gradient(
      to right,
      var(--color-primary) 20%,
      var(--color-primary-active) 80%
    );
    background-clip: content-box;
  }
  .scroll-gradient::-webkit-scrollbar-thumb:vertical {
    background: linear-gradient(
      to bottom,
      var(--color-primary) 20%,
      var(--color-primary-active) 80%
    );
    background-clip: content-box;
  }
  .scroll-gradient::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-active);
    border: none;
  }
  .scroll-gradient::-webkit-scrollbar-corner {
    background: transparent;
  }
  .scroll-gradient::-webkit-scrollbar-button {
    display: none;
  }
}

Монорельс

Системное сообщение №1 — Проверка скролла.

Системное сообщение №2 — Проверка скролла.

Системное сообщение №3 — Проверка скролла.

Системное сообщение №4 — Проверка скролла.

Системное сообщение №5 — Проверка скролла.

Системное сообщение №6 — Проверка скролла.

Системное сообщение №7 — Проверка скролла.

Системное сообщение №8 — Проверка скролла.

Системное сообщение №9 — Проверка скролла.

Системное сообщение №10 — Проверка скролла.

Показать CSS код 
/* Firefox */
.scroll-monorail {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) var(--color-base-bg);
}

@supports selector(::-webkit-scrollbar) {
  /* Отключение стандартных скроллов */
  .scroll-monorail {
    scrollbar-width: auto !important;
    scrollbar-color: unset !important;
  }

  .scroll-monorail::-webkit-scrollbar {
    width: 0.75rem;
    height: 0.75rem;
  }
  .scroll-monorail::-webkit-scrollbar-track {
    background: var(--color-base-borders);
    background-clip: padding-box;
    border-radius: 9999px;
    border: 4px solid transparent;
  }
  .scroll-monorail::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 9999px;
  }
  .scroll-monorail::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-active);
  }
  .scroll-monorail::-webkit-scrollbar-corner {
    background: transparent;
  }
  .scroll-monorail::-webkit-scrollbar-button {
    display: none;
  }
}

Похожие статьи