Imagem de uma calçada e coqueiro ao fundo atrás de uma grade

CSS Scroll Snap Points

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.”

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 pra 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 value que configurarmos.

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

See the Pen CSS Snap Points by Raphael Fabeni (@raphaelfabeni) on CodePen.

See the Pen CSS Snap Points by Raphael Fabeni (@raphaelfabeni) on CodePen.

Algumas referências e links legais:

Gostou? Escrevi alguma groselha? Quer melhorar? Abra uma issue mencionando o post e vamos conversar.

See all posts...