0Pricing
CSS Academy · Aula

scroll-snap-type e scroll-snap-align

Crie experiências de rolagem para carrosséis e paginação com as propriedades de CSS scroll snap.

scroll-snap-type e scroll-snap-align é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

O que é o encaixe de rolagem do CSS?

O encaixe de rolagem do CSS permite que contêineres roláveis se "encaixem" em posições específicas após a rolagem, criando comportamentos controlados de paginação e carrossel sem JavaScript.

scroll-snap-type no contêiner

Ative o encaixe no contêiner rolável:

  <div class="carousel">
    <div class="item">1</div><div class="item">2</div><div class="item">3</div>
  </div>

Valores de scroll-snap-type

Há duas partes:

  • Eixo: x, y ou both
  • Rigidez: mandatory (sempre encaixa) ou proximity (encaixa quando está próximo de um ponto de encaixe)
  <div class="paged">Paged container</div>
  <div class="freeform">Freeform container</div>

scroll-snap-align nos itens

Defina onde cada elemento filho se encaixa dentro do contêiner:

  <div class="carousel-demo">
    <div class="carousel-item">1</div><div class="carousel-item">2</div>
  </div>

Encaixe de páginas em tela cheia

Um layout vertical de seções em tela cheia com paginação:

  <div class="sections">
    <div class="section">Section 1</div><div class="section">Section 2</div>
  </div>

Encaixe de carrossel horizontal

Um carrossel horizontal de cartões com encaixe:

  <div class="carousel">
    <div class="card">Card 1</div><div class="card">Card 2</div><div class="card">Card 3</div>
  </div>

scroll-snap-stop

scroll-snap-stop: always impede que uma rolagem rápida ignore pontos de encaixe. O usuário não pode avançar mais de um item por gesto de rolagem.

  <div class="slider">
    <div class="slide">1</div><div class="slide">2</div>
  </div>

scroll-snap-margin e scroll-padding

Ajuste a posição de encaixe nos itens (scroll-margin) ou no contêiner (scroll-padding):

  <div class="carousel">Carousel container</div>

overscroll-behavior

overscroll-behavior: contain impede o encadeamento da rolagem — quando o contêiner chega ao limite de rolagem, a página também não rola:

  <div class="modal-body">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>

Considerações de acessibilidade

Os carrosséis com encaixe ainda devem ser navegáveis pelo teclado. As teclas de seta devem mover o usuário entre os pontos de encaixe. Adicione funções e rótulos de carrossel do ARIA. A rolagem programática por meio de JavaScript deve respeitar os mesmos pontos de encaixe.

Carrosséis com CSS versus JS

O encaixe de rolagem do CSS atende à maioria das necessidades básicas de carrosséis sem JavaScript: encaixe, ocultação da barra de rolagem e alinhamento do preenchimento. Use uma biblioteca JS quando precisar de: indicadores de pontos, botões anterior/próximo com transições animadas ou gerenciamento complexo de acessibilidade.

Verificação rápida

Qual valor de scroll-snap-type garante que o contêiner sempre pare exatamente em um ponto de encaixe, nunca entre dois pontos?

Recapitulação

O encaixe de rolagem do CSS cria comportamentos de paginação e carrossel. Defina scroll-snap-type: x mandatory no contêiner e scroll-snap-align: start nos itens. Use scroll-snap-stop: always para impedir que pontos sejam ignorados. Combine com overscroll-behavior: contain para impedir o encadeamento da rolagem. Oculte as barras de rolagem com scrollbar-width: none para obter uma aparência limpa.

Perguntas Frequentes

A aula “scroll-snap-type e scroll-snap-align” é grátis?

Sim — o texto completo de “scroll-snap-type e scroll-snap-align” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “scroll-snap-type e scroll-snap-align”?

Crie experiências de rolagem para carrosséis e paginação com as propriedades de CSS scroll snap. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “scroll-snap-type e scroll-snap-align”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. overflow: hidden scroll auto clip
  2. scroll-behavior: smooth
  3. scroll-snap-type e scroll-snap-align
  4. Estilização da Barra de Rolagem com ::-webkit-scrollbar
← Voltar para CSS Academy