Scroll Snap
Snap de rolagem
CSS Scroll Snap permite que uma área de rolagem pare em pontos de alinhamento escolhidos após as pessoas rolarem.
Outro exemplo
Um tour de produto por toque tem cinco painéis em tela cheia com encaixe inline obrigatório. Seu `scroll-padding` deixa espaço para o cabeçalho fixo. Cada painel também funciona com teclado e link direto. Com zoom de 280%, as pessoas ainda podem navegar pelo conteúdo grande sem ficarem presas.
Partes principais
- 01Contêiner de encaixe
- 02Áreas de encaixe
- 03Alinhamento e rigor
Use-o quando
Use-o quando o conteúdo tiver pontos de parada claros e as pessoas ainda precisarem rolar da maneira normal no navegador.
Não o use quando
Evite encaixe obrigatório rigoroso para artigos longos, conteúdo ampliado, áreas de rolagem dentro de outros rolagens ou navegação livre.
Nome usado no código
scroll-snap-type + scroll-snap-align + scroll-padding Antes de lançar
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with Snap de rolagem (Scroll Snap). User context: Um tour de produto por toque tem cinco painéis em tela cheia com encaixe inline obrigatório. Seu `scroll-padding` deixa espaço para o cabeçalho fixo. Cada painel também funciona com teclado e link direto. Com zoom de 280%, as pessoas ainda podem navegar pelo conteúdo grande sem ficarem presas. Design concept to apply: Snap de rolagem (Scroll Snap). Why it fits: Use-o quando o conteúdo tiver pontos de parada claros e as pessoas ainda precisarem rolar da maneira normal no navegador. Do not use it when: Evite encaixe obrigatório rigoroso para artigos longos, conteúdo ampliado, áreas de rolagem dentro de outros rolagens ou navegação livre. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): Um documento formal ainda pode ser rascunho, release candidate ou versão final. Cheque o status e o suporte no navegador ou plataforma. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Conferir este pedido
Review how Snap de rolagem (Scroll Snap) is used now. Definition: CSS Scroll Snap permite que uma área de rolagem pare em pontos de alinhamento escolhidos após as pessoas rolarem. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.