В современных интерфейсах часто хочется, чтобы полосы прокрутки не отвлекали пользователя от контента. При этом полностью скрывать скролл — не всегда хорошая идея: пользователь может не понять, что блок можно прокручивать. Оптимальное решение — делать скролл невидимым, но показывать его при наведении.
Почему стандартные скроллы неудобны
Если скрыть полосу прокрутки через overflow: hidden; или
scrollbar-width: none;, то при её появлении блок «скачет» —
уменьшается на ширину скролла.
Кроме того, браузеры по-разному обрабатывают стили:
- Chrome, Safari, Edge используют псевдоэлементы
::-webkit-scrollbar. - Firefox работает через
scrollbar-widthиscrollbar-color.
Решение: прозрачный скролл по умолчанию
Чтобы избавиться от скачков, нужно:
- Оставить место под скролл всегда (фиксированный размер).
- Сделать его прозрачным по умолчанию.
- При наведении менять цвет ползунка.
Готовый код
.column {
flex: 1 0 332px;
max-width: 27%;
padding-bottom: .5rem;
border-left: 1px solid rgba(89, 96, 89, 0.23);
border-top-left-radius: 1rem;
position: relative;
overflow-y: auto;
max-height: calc(100vh - 100px);
/* Firefox */
scrollbar-width: thin;
scrollbar-color: transparent transparent;
/* Chrome / Safari / Edge */
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 4px;
transition: background 0.3s ease;
}
&:hover {
scrollbar-color: #4caf50 transparent; /* Firefox */
}
&:hover::-webkit-scrollbar-thumb {
background: #4caf50; /* Chrome / Safari */
}
}
Как это работает
- В Chrome/Safari/Edge полоса есть, но она прозрачная. При наведении становится цветной.
- В Firefox скролл всегда «тонкий», но цвет появляется только при hover.
- Размер скролла фиксирован, поэтому контейнер не скачет.
Вариации
1. Полное скрытие — можно использовать display: none; для скролла, но это вызывает скачки и плохо для UX.
2. Overlay-скроллы — на macOS и некоторых браузерах полосы накладываются поверх контента и не занимают место. Для Windows можно подключить библиотеку вроде OverlayScrollbars.
Итог
Используя комбинацию scrollbar-width, scrollbar-color и
::-webkit-scrollbar, можно сделать аккуратный, «ненавязчивый» скролл,
который будет невидим по умолчанию и появляться при наведении.
Такой подход отлично подходит для карточек, списков и колонок — например, для Kanban-досок.
Совет: используйте минимальную ширину (4–6px) и подбирайте цвет в палитре проекта. Полностью скрывать скролл не рекомендуется — это может запутать пользователя.
