Scroll que pula para a próxima seção com CSS puro

41d atrás

A propriedade scroll-snap-type do #CSS configura o comportamento da barra de rolagem. Nesse tutorial vamos fazer com que ela pule para a seção anterior ou posterior a cada rolagem.

Para isso, vamos primeiro configurar 5 seções no HTML:

<section style="background-color: #009688">Seção 1</section>
<section style="background-color: #00BCD4">Seção 2</section>
<section style="background-color: #03A9F4">Seção 3</section>
<section style="background-color: #2196F3">Seção 4</section>
<section style="background-color: #3F51B5">Seção 5</section>

Vamos configurar o scroll-snap-type do body, que é o container que envolve as seções:

body, html {
    scroll-snap-type: y mandatory;
}

Explicando os parâmetros de scroll-snap-type:

y: é o eixo em que será aplicado o comportamento, pode x, y ou both.
mandatory: é o tipo de comportamento, nesse caso, ele sempre pula de seção em cada rolagem, pode ser mandatory ou proximity.

E agora vamos definir os estilos das seções:

section {
    font-size: 2em;
    height: 70vh;
    scroll-snap-align: start;
}

Aqui a propriedade mais importante é scroll-snap-align: start, ela define que o início da próxima seção vai se alinhar com o topo da janela.

Veja aqui o código completo e o resultado:

Comentários (0)