🔥 CSS-свойство дня: scrollbar-gutter
Бесит, когда контент «прыгает» вправо-влево на 15–20 пикселей при открытии модалок или смене страниц? Это исчезает и появляется полоса прокрутки.
Но решение есть: Свойство scrollbar-gutter резервирует место под скроллбар заранее. Контент стоит как вкопанный, даже если прокрутки в данный момент нет.
Как использовать:
html{
scrollbar-gutter: stable;
}
Плюсы этого свойства:
✅ Никаких костылей: Больше не нужно вычислять ширину скролла через JS или calc(100vw - 100%).
✅ UX +100: Сайт выглядит монолитно, верстка не дергается.
✅ Чистый CLS: Помогает держать показатели стабильности макета в норме.
На macOS с «умными» (плавающими) скроллбарами свойство ничего не меняет (там и так ничего не прыгает). А вот на Windows - это просто спасение.👌
❤️ - было полезно
#cssсвойстводня
