Как работает CSS Scroll Snap
Хочу продолжить тему про Firefox. В посте выше было написано, что в новой версии браузера была добавлена поддержка последнего синтаксиса для scroll snapping. Рейчел Эндрю месяц назад написала пост про эту фичу — "CSS Scroll Snap Updated in Firefox 68".
Scroll Snap — это эффект прилипания контента при прокрутке содержимого контейнера. Он очень полезен при реализации каруселей, слайдеров и подобных элементов. Прилипание можно реализовать, используя JavaScript, но это может привести к плохому пользовательскому опыту, именно поэтому CSS Working Group разработала спецификацию "CSS Scroll Snap".
Работает Sroll Snap так: у контейнера задаётся свойство scroll-snap-type
, а у вложенных элементов, которые должны прилипать, — scroll-snap-align
. До Firefox 68 был реализован черновой стандарт Scroll Snap, в новой версии его поддержка была прекращена.
На данный момент поддержка актуальной спецификации Scroll Snap есть во всех основных браузерах: Firefox, Chrome, Safari.
https://hacks.mozilla.org/2019/06/css-scroll-snap-updated-in-firefox-68/