Efeitos de scroll sempre foram mais relacionados a dispositivos touch, no entanto, ultimamente vários projetos têm incorporado esse item, enriquecendo a experiê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 ideia básica consistia em separar o conteúdo em áreas distintas, que 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”.

CSS Scroll Snap

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 para esse ponto! Depois vai pra esse outro. E assim vai… Olha só a documentação oficial.

Stop talking…

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 valueque configurarmos.

Eaí, podemos chegar em umas brincadeiras mais ou menos assim:

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”zvEdRy” default_tab=”result” user=”raphaelfabeni”]See the Pen <a href=’http://codepen.io/raphaelfabeni/pen/zvEdRy/’>CSS Snap Points</a> by Raphael Fabeni (<a href=’http://codepen.io/raphaelfabeni’>@raphaelfabeni</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

 

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”RWLZBa” default_tab=”result” user=”raphaelfabeni”]See the Pen <a href=’http://codepen.io/raphaelfabeni/pen/RWLZBa/’>CSS Snap Points</a> by Raphael Fabeni (<a href=’http://codepen.io/raphaelfabeni’>@raphaelfabeni</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

***

Artigo publicado originalmente em: http://www.raphaelfabeni.com.br/css-scroll-snap-points/