Typ s rolovaním - Triky CSS

Anonim

Táto scroll-snap-typenehnuteľnosť je súčasťou modulu CSS Scroll Snap. Prichytávanie 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 to ako položiť magnet na prvok, ktorý sa prilepí na hornú časť výrezu a prinúti stránku, aby prestala rolovať priamo tam.

To je užitočné, ak chcete zastaviť prehliadač v konkrétnych bodoch stránky. Napríklad: Používateľ, ktorý prezerá fotogalériu, sa pravdepodobne nebude chcieť posúvať do polovice obrázka - pravdepodobne by radšej pri posúvaní mal obrázok „prichytený“ na správnu pozíciu. Prichytávanie rolovania poskytuje vývojárom čistý spôsob CSS, ako zvládnuť toto správanie.

scroll-snap-typeje povinná vlastnosť v každom posúvateľnom kontajneri, do ktorého chcete pridať prichytenie rolovania. Odpovedá na tri otázky týkajúce sa posúvacieho kontajnera:

  1. Používa kontajner prichytenie zvitku?
  2. Na ktorú os - x (horizontálna), y (vertikálna), blok alebo vložená - by sa malo vzťahovať prichytenie rolovania?
  3. Ako by sa malo chovať prichytenie zvitku? Je to vynútené na 100%, alebo sa to prejaví, až keď sa používateľ dostane „dosť blízko“ k polohe prichytenia? Viac o tom neskôr.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Syntax

scroll-snap-type: none | ( x | y | block | inline | both ) ( mandatory | proximity )

Hodnoty

scroll-snap-type akceptuje nasledujúce hodnoty:

  • none zakáže prichytenie rolovania.
  • x umožňuje prichytenie rolovania iba pozdĺž osi x.
  • y umožňuje prichytenie rolovania iba pozdĺž osi y.
  • block umožňuje prichytenie rolovania iba pozdĺž osi bloku.
  • inline umožňuje prichytenie rolovania iba pozdĺž osi inline.
  • bothumožňuje prichytenie rolovania pozdĺž oboch osí (ktoré si môžete predstaviť ako xa y, alebo inlinea block.
  • mandatory je hodnota prísnosti, ktorá informuje prehliadač, aby vždy prešiel do polohy prichytenia, keď sa neuskutočňuje posúvanie.
  • proximityje hodnota prísnosti, ktorá informuje prehliadač, aby prešiel do polohy prichytenia, ak sa akcia rolovania priblíži k polohe prichytenia. Ak to nie je celkom blízko, prehliadač by nemal prasknúť a rolovanie sa bude správať normálne.

Príklad

Pozrite si ukážku typu zvitok pera typu
CSS-Tricks (@ css-tricks) na serveri CodePen.

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-padding
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Zdroje

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