Rolovanie-zarovnanie - Triky CSS

Anonim

scroll-snap-alignje súčasťou modulu CSS Scroll Snap Module. Posunutie rolovania označuje „uzamknutie“ polohy výrezu voči konkrétnym prvkom na stránke pri rolovaní okna (alebo posúvateľného kontajnera). Predstavte si nádobu na rolovanie, ako je napríklad vloženie magnetu na prvok, ktorý sa prilepí na hornú časť výrezu, a prinúti stránku, aby prestala rolovať priamo tam.

scroll-snap-alignje požadovaná vlastnosť pre prvok prichytenia posúvania v kontajneri prichytenia posúvania. Ďalšie informácie o kontajneroch na scroll-snap-typeprichytenie rolovania nájdete v položke almanachu. scroll-snap-alignhovorí prehliadači, ktorá časť prvku by mali byť vyrovnané, keď je hračka bod stretol: V prípade, že prvok snap do start, centeralebo endz nadradeného kontajnera, ktorý obsahuje scroll-snap-typevlastnosť?

Ak chcete, aby sa prvok zacvakol na svoje miesto na začiatku tohto prvku, dajte mu nasledujúcu scroll-snap-alignhodnotu:

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

Syntax

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

Pre túto vlastnosť môžete určiť až 2 hodnoty predstavujúce os bloku a inline. Ak dáte iba 1 hodnotu, táto hodnota sa použije pre obe osi.

Hodnoty

scroll-snap-align akceptuje nasledujúce hodnoty:

  • none zakáže prichytenie rolovania na prvku
  • start zarovná začiatok prvku so západkou kontajnera zvitku, keď zapadne na miesto
  • end zarovná koniec prvku so západkou kontajnera na zvitok, keď zapadne na miesto
  • center po zacvaknutí na miesto zarovná stred elementu so západkou kontajnera na zvitok

Príklad

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome Firefox IE Hrana Safari
69 68 11 * 79 11

Mobil / tablet

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

Súvisiace

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

Zdroje

  • Odporúčanie kandidátov na CSS Scroll Snap W3C
  • Praktické prichytávanie pomocou CSS
  • Predstavujeme CSS rolovacie body