Rolovanie-zastavenie - Triky CSS

Anonim

scroll-snap-stopje 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-stopje voliteľná vlastnosť pre prvok zovretia rolovania v kontajneri zovretia rolovania. Ďalšie informácie o kontajneroch na scroll-snap-typeprichytenie rolovania nájdete v položke almanachu.

scroll-snap-stopumožňuje vynútiť prichytenie kontajnera na rolovanie k určitému prvku. Predpokladajme, že ste sa posúvali v rámci nádoby na rolovanie a dali ste jej obrovské otočné koliesko myši. Prehliadač by za normálnych okolností nechal rýchlosť vášho posúvania preletieť okolo záchytných bodov, kým sa neusadila na záchytnom bode blízko miesta, kde by sa posúvanie obvykle skončilo. Nastavením scroll-snap-stopmôžete prehliadaču povedať, že sa musí zastaviť na konkrétnom prvku, skôr ako umožní používateľovi prekonať ho.

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

Syntax

scroll-snap-stop: normal | always;

Hodnoty

scroll-snap-stop akceptuje nasledujúce hodnoty:

  • normal je predvolená hodnota a umožňuje rolovanie elementu okolo bez toho, aby ste ho pricvakávali
  • always vynúti prehľadávač, aby sa uchytil k tomuto prvku, aj keď by zvitok normálne prešiel okolo tohto prvku

Príklad

Pozrite si príklad pera scroll-snap-stop
od CSS-Tricks (@ css-tricks) na 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

Upozorňujeme, že Chrome momentálne nemusí byť podporovaný scroll-snap-stop: always;.

Súvisiace

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-align

Zdroje

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