scrollbar-width

Изменяем ширину полосы прокрутки

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

scrollbar-width позволяет изменить ширину полосы прокрутки.

Пример

Секция статьи "Пример"
        
          
          html {  scrollbar-width: thin;}
          html {
  scrollbar-width: thin;
}

        
        
          
        
      
Открыть демо в новой вкладке
Тонкий скроллбар
Пример того, как это выглядит в Firefox

Как пишется

Секция статьи "Как пишется"

У scrollbar-width есть 3 возможных значения:

  1. auto — дефолтное значение. Браузер отрисует обычный скроллбар.
  2. thin — браузер отрисует тонкий скроллбар.
  3. none — скроллбар не будет отрисован. При этом контент по прежнему можно будет прокрутить.

Вот как они выглядят рядом:

Открыть демо в новой вкладке
Разные значения ширины скроллбара
Пример того, как скроллбары с разной шириной выглядят в Firefox

Значение none не рекомендуется использовать. Мы должны явно дать пользователю понять что контент в каком-то блоке выходит за его границы, и ему нужно пролистать чтобы увидеть остальное. Если просто убрать скроллбар, то это только запутает пользователей. К тому же если пользователь использует только мышь, то для этот контент может оказаться недоступным (вдруг у него сломалось колесо прокрутки).

В целом, с шириной полосы прокрутки нужно обращаться очень осторожно. Даже если просто сделать её тоньше, мы можем создать проблемы с доступностью — пользователям буквально сложнее попасть мышью в тонкий ползунок. А убирая ползунок совсем мы должны не допускать того, чтобы контент за пределами видимой области стал недоступен.