Posúvací okraj - Triky CSS

Anonim

scroll-marginje 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-marginje 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.

Zadajte okraj posuvu

scroll-marginsa používa na úpravu oblasti prichytenia prvku (rámček, ktorý definuje, kam sa bude prvok prichytávať). Pridanie scroll-marginje užitočné, keď potrebujete dať elementu priestor od okraja kontajnera, keď zapadnete na miesto, ale v situáciách, keď každý element môže vyžadovať mierne odlišné medzery. Ak majú všetky prvky rovnaké požiadavky na medzery, zvážte použitie scroll-paddingnamiesto nadradeného kontajnera, scroll-marginpretože to ovplyvní medzery pre všetky prvky v kontajneri.

Jednoduchý príklad, keď scroll-marginumožňuje rozstup 50px okolo hornej a ľavej strany prvku, vyzerá takto:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
Ružová oblasť predstavuje scroll-marginna tomto prvku.

Syntax

/* Shorthand */ scroll-margin: (1,4); /* Longhands */ scroll-margin-top: ; scroll-margin-right: ; scroll-margin-bottom: ; scroll-margin-left: ; /* inline-specific and block-specific properties as well */ scroll-margin-block: (1,2); scroll-margin-inline: (1,2);

Dôležitá poznámka k rukopisom: Chrome (a možno aj ďalšie prehliadače) v súčasnosti nepodporujú formát scroll-paddinga scroll-marginvlastnosti z ruky . Pre maximálnu podporu prehľadávača použite skratku. Ak sa chcete dozvedieť viac podrobností a aktuálneho stavu, pozrite si toto vydanie v prehľadávači chýb chrómu.

Hodnoty

scroll-marginprijíma nasledujúce dĺžku hodnota, ktorá je zapísaná podobne margina ďalšie vlastnosti, kedy hodnota môže byť definovaná s jednotkami ( px, em, vh, atď). Ďalšie informácie nájdete v module hodnôt a jednotiek W3C. Percentá sa nemôžu použiť scroll-marginna špecifikáciu.

Príklad

Pozrite si príklad
podloženia perom pomocou 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

Súvisiace

  • scroll-snap-type
  • 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