Container scroll-state queries — определяем состояние скролла на чистом CSS
CSS container scroll-state queries позволяют управлять стрелками, липкими шапками и подсказками без JavaScript, но поддержка пока ограничена
Автор статьи Brecht De Ruyte показывает, как с помощью CSS container scroll-state queries можно определять, проскроллен контейнер или нет — без единой строчки JavaScript.
Это открывает кучу практичных кейсов:
- показывать и скрывать стрелки прокрутки
- делать «умные» липкие шапки
- отображать подсказки только когда есть скролл
По сути, ещё один жирный кусок JS-кода с подписками на scroll, состояниями и хрупкой логикой можно спокойно выкинуть.
Поддержка браузеров пока ограничена, ждем Safari и Firefox. Но направление очевидное: CSS всё активнее забирает на себя UI-логику, которая раньше считалась «исключительно JS-шной».
Очень рекомендую статью — отличный взгляд на то, каким будет фронтенд в ближайшие годы.