Scroll Snap
Scroll Snap
CSS Scroll Snap permette a un'area di scorrimento di fermarsi in punti di allineamento scelti dopo che le persone scorrono.
Un altro esempio
Un tour del prodotto touch ha cinque pannelli a schermo intero con aggancio in linea obbligatorio. Il suo `scroll-padding` lascia spazio per l'intestazione fissa. Ogni pannello funziona anche con tastiera e link diretto. Con zoom al 280%, le persone possono ancora scorrere contenuti grandi senza rimanere intrappolate.
Parti principali
- 01Contenitore snap
- 02Aree snap
- 03Allineamento e rigidità
Usalo quando
Usalo quando il contenuto ha punti di interruzione chiari e le persone dovrebbero ancora scorrere nel modo normale del browser.
Non usarlo quando
Evitare un aggancio obbligatorio e forte per articoli lunghi, contenuti ingranditi, aree con scorrimento all'interno di altri scorrimenti o navigazione libera.
Nome usato nel codice
scroll-snap-type + scroll-snap-align + scroll-padding Prima di spedire
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 Scroll Snap (Scroll Snap). User context: Un tour del prodotto touch ha cinque pannelli a schermo intero con aggancio in linea obbligatorio. Il suo `scroll-padding` lascia spazio per l'intestazione fissa. Ogni pannello funziona anche con tastiera e link diretto. Con zoom al 280%, le persone possono ancora scorrere contenuti grandi senza rimanere intrappolate. Design concept to apply: Scroll Snap (Scroll Snap). Why it fits: Usalo quando il contenuto ha punti di interruzione chiari e le persone dovrebbero ancora scorrere nel modo normale del browser. Do not use it when: Evitare un aggancio obbligatorio e forte per articoli lunghi, contenuti ingranditi, aree con scorrimento all'interno di altri scorrimenti o navigazione libera. 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): Un documento formale può ancora essere una bozza, un release candidate o la versione finale. Controlla il suo stato e il supporto per browser o piattaforma. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Controlla questa richiesta
Review how Scroll Snap (Scroll Snap) is used now. Definition: CSS Scroll Snap permette a un'area di scorrimento di fermarsi in punti di allineamento scelti dopo che le persone scorrono. 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.