#фишка дня

В CSS-чате с завидной регулярностью спрашивают, как скрыть скроллбар, но оставить возможность скроллить.

Лично мне непонятно, зачем так делать. Оставляйте хоть небольшую подсказку пользователям, на мобильных телефонах и macOS и так скроллбар скрыт (почти) всегда.

Но раз пошла такая пляска, давайте решать проблему. Без JavaScript.

1. Обёртка и избыточная ширина

Старое как мир решение. Добавляем контейнеру избыточную ширину, чтобы его скроллбар вышел за пределы обёртки. В данном случае я предпочитаю создавать избыточную ширину абсолютным позиционированием: https://codepen.io/alinaki/pen/bGgmqVx

25px — ширина скроллбара — взята наобум. Она колеблется от 17 до 23 пикселей в различных средах.

Вы уже чуете, что ерунда какая-то, правда? Но это решение ещё несколько лет назад было единственным, ведь приходилось поддерживать старые браузеры.

2. Правила для работы с полосой прокрутки

Здесь всё максимально просто: у каждого из четырёх (трёх?) современных и сравнительно современных движков имеются соответствующие…

We got a nice tip from Lydia Dugger via email with a method for changing the styles that WebKit browsers apply to form fields that have been