Стили, которые зависят от направления прокрутки со scroll-state(scrolled). Юна Кравец о новой функции scroll-state() для выражений от контейнера в Chrome 144. Она позволит применять стили шапки, тулбаров и других элементов в зависимости от направления прокрутки без JS и прогрессивно улучшать интерфейсы со статическим фолбеком. #css #scroll

https://una.im/scroll-state-scrolled

Выражения scroll-state от контейнера в CSS теперь определяют прокрутку. Брехт де Рёйте рассказывает о новом состоянии scrolled для @container в Chrome 144 и о stuck, snapped и scrollable из Chrome 133, чтобы делать прячущиеся шапки, подсказки и стрелки прокрутки на чистом CSS. #css #scroll

https://utilitybend.com/blog/is-it-scrolled-is-it-not-lets-find-out-with-css-container-scroll-state-queries/

Анимации, управляемые прокруткой. Джош Комо разбирает CSS animation-timeline, где кадры анимации раскладываются по расстоянию прокрутки, а не по времени. Рассказывает про функции тайминга, диапазоны анимации (cover, contain, entry, exit), проценты диапазонов, таймлайны прогресса прокрутки и связанные таймлайны через view-timeline и timeline-scope. Поддержка около 85%, в Firefox — за флагом. #scroll #animation

https://www.joshwcomeau.com/animation/scroll-driven-animations/

Корневой скроллер и как его не потерять. Килиан Валкхоф объясняет, что умеет главный скролл-контейнер страницы: восстанавливает позицию скролла, слушает пробел и стрелки, а на мобильных прячет адресную строку и даёт pull-to-refresh. Обёртка с фиксированной высотой и overflow его подменяет, и это выдаёт window.scrollY, застрявший на нуле. У полноэкранных макетов, стики-шапок и блокировки прокрутки есть решения, сохраняющие скролл страницы. #css #scroll

https://polypane.app/blog/the-root-scroller-and-how-not-to-lose-it/

Передаём sibling-count() родительскому элементу. Темани Афиф показывает, как родителю узнать, сколько у него детей. Функция sibling-count() считает соседей, а не детей, поэтому он добавляет лишний элемент шириной в sibling-count() и с помощью анимаций по скроллу, view-timeline и timeline-scope превращает её в переменную --n на родителе. Пригодится для счётчиков, почти квадратных сеток с sqrt() и круговых раскладок. Пока только в Chrome и Edge. #css #scroll

https://blog.master.dev/transferring-sibling-count-to-a-parent-element/