TGViewer
mefody.dev mefody.dev @mefody_dev · 5.39K subscribers
Post #117 3.33K
Стилизация скроллбаров

В Chrome 121 завезли поддержку свойств scrollbar-width и scrollbar-color. Там и раньше было наследие WebKit с префиксами, но теперь будет работать по стандарту.

Свойство scrollbar-width принимает три значения:
- none — прячет скроллбар, но оставляет возможность скроллить;
- auto — дефолтный системный скроллбар;
- thin — скроллбар потоньше.

Ширину в пикселях задавать нельзя, так решили при доработке стандарта. Что для пользователя, наверное, лучше: есть привычный элемент UI, который узнаётся по форме и размеру, на каждом сайте.

Свойство scrollbar-color принимает два цвета. В примере scrollbar-color: yellow green сам скроллбар будет жёлтый, а трек под ним — зелёный.

Брамус делится примером, как добавить совместимость со старыми браузерами и WebKit. В Firefox всё работает с 2018 года. Кстати, для Safari нужен костыль, если вы меняете цвет скроллбара на лету.

https://developer.chrome.com/docs/css-ui/scrollbar-styling
Chrome for Developers Scrollbar styling | CSS and UI | Chrome for Developers Use the `scrollbar-width` and `scrollbar-color` properties to style scrollbars.
  • 👍 42
  • 🔥 10
  • ❤‍🔥 5
  • 👏 5
  • ❤ 1
More from @mefody_dev
  1. Sep 28, 2026View Transitions Toolkit Брамус делится своей коллекцией утилит, чтобы можно было более уд…
  2. Sep 25, 2026Эффект одометра Люблю такие демки, когда на чистом CSS делают что-то необычное, для чего я…
  3. Sep 23, 2026Цена ошибок гидрации В React есть много ухищрений, чтобы серверный кусок страницы обновилс…
  4. Sep 16, 2026Какие анимации более производительные: CSS или JS? Лучше пару раз увидеть, чем много откуд…
  5. Sep 14, 2026Единица измерения lh Если коротко, то 1lh = 1 line height. И это не размер шрифта, который…
  6. Sep 11, 2026<mermaid-element> Ещё одна полезная библиотека. Брамус собрал кастомный элемент, которому…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →