#фишка дня В CSS-чате с завидной регулярностью спрашивают, ка | Будни разработчика

#фишка дня

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

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

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

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

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

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

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

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

Здесь всё максимально просто: у каждого из четырёх (трёх?) современных и сравнительно современных движков имеются соответствующие правила для скрытия полосы прокрутки: https://codepen.io/alinaki/pen/YzNJGOa

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

В таком случае можно, например, наложить тени: https://codepen.io/alinaki/pen/oNBaWvq

#css #scroll #ux