CSS scroll snap: carrosséis e seções de tela cheia
Guia de CSS scroll snap
CSS scroll snap: carrosséis, seções de tela cheia e um playground ao vivo
Teste cada valor de scroll-snap-type, scroll-snap-align e scroll-snap-stop em uma área de rolagem ao vivo e depois copie um carrossel só com CSS e seções de tela cheia que continuam acessíveis.
O scroll snap faz uma caixa com rolagem parar em filhos escolhidos, e não em qualquer lugar. Coloque scroll-snap-type: x mandatory (ou y, ou proximity) no contêiner de rolagem e depois scroll-snap-align: start, center ou end em cada filho. Adicione scroll-padding para headers fixos e scroll-snap-stop: always para parar em cada item.
Propriedades de scroll snap em resumo
Propriedade
Definida em
Valores
Contêiner de rolagem
none, x, y, block, inline, both + mandatory ou proximity
Cada filho
none, start, center, end (um ou dois valores)
Cada filho
normal (pode passar direto), always (precisa parar)
Contêiner de rolagem
Recuo em comprimento ou porcentagem, como o padding
Cada filho
Expansão em comprimento em volta da área de snap
O scroll snap antes exigia uma biblioteca de carrossel. Hoje, poucas linhas de CSS entregam cards deslizáveis, uma galeria paginada ou seções de tela cheia, com rolagem com inércia e suporte a teclado cuidados pelo navegador. Use o playground para sentir a diferença entre cada valor antes de copiar qualquer código.
Escolha um eixo e o nível de rigidez do contêiner no playground.
Escolha como cada slide se alinha e se a rolagem precisa parar em todos os slides.
Role a prévia com trackpad, roda do mouse, toque ou as setas do teclado depois de clicar nela.
Copie o CSS gerado, ou use um dos padrões completos mais abaixo.
Quando um eixo é informado sem palavra-chave de rigidez, proximity é usado.
Prefira proximity para conteúdo longo: mandatory pode prender os leitores quando um filho é mais alto que o contêiner.
Torne a área de rolagem focável com tabindex="0" e um nome acessível, para que usuários de teclado possam rolá-la com as setas.
O snap funciona com scrollIntoView() e links de âncora, então botões simples de próximo e anterior podem controlar um carrossel.
Perguntas frequentes
Qual a diferença entre mandatory e proximity?
Com mandatory, o contêiner sempre se acomoda em uma posição de snap quando a rolagem para. Com proximity, ele só faz o snap quando a rolagem termina perto de uma, o que deixa as pessoas livres para ler no meio do caminho. proximity é o padrão quando você escreve só o eixo.
Por que o scroll snap não funciona?
As causas comuns são: o scroll-snap-type está nos filhos em vez de no pai que rola, o pai não transborda de fato (defina overflow-x: auto e um tamanho fixo), ou os filhos não têm scroll-snap-align. Para snap na página inteira, o contêiner é o html, não o body.
Como evito que um header fixo cubra as seções com snap?
Defina scroll-padding-top no contêiner de rolagem com a altura do header, por exemplo html { scroll-padding-top: 64px; }. As seções com snap e os saltos de âncora passam a parar abaixo do header, e não por baixo dele.
Consigo fazer um carrossel sem JavaScript?
Sim, para deslizar e rolar: uma linha flex com overflow-x: auto e snap x mandatory já é um carrossel funcional. Indicadores em bolinha que mostram o slide atual, autoplay e loop ainda precisam de um pouco de script.
O CSS scroll snap é suportado em todo lugar?
O scroll-snap-type é Baseline amplamente disponível desde 2022 no Chrome, Edge, Firefox e Safari, e o scroll-snap-stop desde julho de 2022. Você pode usá-lo sem fallback; navegadores sem suporte simplesmente rolam livremente.
Carrosséis que as pessoas conseguem usar
Deixe o próximo card aparecer um pouco deixando cada slide mais estreito que o contêiner, por exemplo flex: 0 0 85%. A borda visível mostra às pessoas que há mais para deslizar, o que um slide encaixado com perfeição não faz.
Dê à área de rolagem um rótulo como aria-label="Customer photos" e mantenha os slides como uma lista. Não esconda dos leitores de tela os slides fora da tela, e nunca use autoplay sem um controle de pausa.
Seções de tela cheia sem a armadilha
O snap em altura total impressiona em uma demonstração e irrita os leitores quando uma seção tem mais texto do que cabe na tela, porque o snap mandatory fica puxando-os para além dela. Use proximity para seções de página, ou garanta que cada seção caiba de verdade em uma tela de celular.
Respeite o movimento reduzido desligando o scroll-behavior: smooth dentro de uma query prefers-reduced-motion: reduce. O snap em si pode ficar, já que ele move só o quanto o leitor pediu.
Carrossel de cards só com CSS
Carrossel horizontal com o próximo card aparecendo
Deslize, role para o lado ou clique dentro e use as setas. Cada card tem 80 por cento da largura, então o próximo aparece na borda.
Seções de tela cheia
Seções verticais com snap abaixo de um header fixo
O snap fica no html, a área de rolagem da página. O scroll-padding-top mantém as seções livres de um header de 64px, e proximity evita prender seções longas.
Botões de próximo e anterior
Controle o carrossel com scrollBy
O navegador termina o movimento no ponto de snap mais próximo, então rolar a largura de um card cai exatamente no próximo card.