CSS Scroll Snap Points - Blog | Raphael Fabeni
Efeitos de scroll sempre foram mais relacionados a dispositivos touch, no entanto, ultimamente vários projetos tem incorporado esse item, enriquecendo a experência do usuário (claro, pra tudo há exceções).
A solução pra aplicar esse efeito, geralmente era algum plugin jQuery ou algo semelhante e a idéia básica consistia em separar o conteúdo em áreas distintas às quais o usuário conseguiria scrollar até elas, ou clicar em algum botão específico e a página fazer o scroll automático.
Aí, vem o mano CSS e fala: "Calma, galera! Tô chegando junto e vamos fazer isso a partir de agora só com CSS."
Tcharaaaaan! Basicamente com ele conseguimos controlar o comportamento do conteúdo de um wrapper com scroll definindo pontos nos eixos x ou y. Com esses pontos marcados, o wrapper vai pular para um desses pontos no conteúdo após o usuário ter feito a ação de scrollar. Seria como se falássemos assim: usuário dá scroll uma vez e vai pra esse ponto! depois vai pra esse outro.. e assim vai. Olha só a documentação oficial.
Vamos botar a mão na massa e ver essa maravilha. Já aviso de antemão que até a presente data, o suporte segundo o Can I Use não é tão legal, então eu recomendo ver os exemplos abaixo no Firefox.
Basicamente o que vamos fazer é o seguinte: criar um elemento pra servir como wrapper do conteúdo e configurar propriedades como overflow, width e height. A mágica acontece nos seguintes caras:
scroll-snap-type => onde definimos que iremos utilizar os snap points.
scroll-snap-points-x ou scroll-snap-points-y => onde iremos definir os snap points no eixo horizontal ou vertical.
repeat(value) => passamos isso para uma das propriedades acima, para repetirmos os snap points a cada value que configurarmos.