Scroll-snap-align - CSS-Tricks

Anonim

scroll-snap-alignface parte din CSS Scroll Snap Module. Ajustarea derulării se referă la „blocarea” poziției ferestrei de vizualizare la anumite elemente de pe pagină, pe măsură ce fereastra (sau un container rulabil) este derulată. Gândiți-vă la un container cu defilare, ca și cum ați pune un magnet deasupra unui element care se lipeste de partea de sus a ferestrei și forțează pagina să nu mai deruleze chiar acolo.

scroll-snap-aligneste o proprietate necesară pentru un element de derulare în interiorul unui container de derulare. Pentru mai multe informații despre containerele cu defilare, consultați scroll-snap-typeintrarea almanahului. scroll-snap-alignspune browser - ul pe care o parte a unui element ar trebui să fie aliniate atunci când este întâlnit un snap punct: în cazul în care elementul sari pe start, centersau enda containerului părinte care conține scroll-snap-typeproprietatea?

Dacă doriți ca un element să se fixeze la locul său la începutul acelui element, dați-i o scroll-snap-alignvaloare ca aceasta:

/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-align: start; )

Sintaxă

scroll-snap-align: ( none | start | end | center )(1,2)

Puteți specifica până la 2 valori pentru această proprietate, reprezentând respectiv axele bloc și linie. Dacă dați doar o valoare, acea valoare va fi utilizată pentru ambele axe.

Valori

scroll-snap-align acceptă următoarele valori:

  • none dezactivează rotirea pe element
  • start aliniază începutul elementului cu portul de accesare al containerului de derulare atunci când este fixat în poziție
  • end aliniază capătul elementului cu snapportul containerului de derulare atunci când este fixat în poziție
  • center aliniază centrul elementului cu snapportul containerului de derulare atunci când este fixat în poziție

Exemplu

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.

Desktop

Crom Firefox IE Margine Safari
69 68 11 * 79 11

Mobil / Tabletă

Android Chrome Android Firefox Android Safari iOS
88 85 81 11.0-11.2

Legate de

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-stop

Resurse

  • Recomandarea candidatului CS3 Scroll Snap W3C
  • Practic CSS Scroll Snapping
  • Vă prezentăm CSS Scroll Snap Points