Rolovacie polstrovanie - Triky CSS

Anonim

scroll-paddingje 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-paddingje voliteľná vlastnosť pre akýkoľvek kontajner na prichytenie rolovania. Kontajnery na prichytenie rolovaním sú definované vždy, keď je scroll-snap-typevlastnosť nastavená na ľubovoľnú inú hodnotu none. Ďalšie informácie o kontajneroch na scroll-snap-typeprichytenie rolovania nájdete v položke almanachu.

Dobre, takže pokračujte k posunutiu výplňou

scroll-paddingsa používa na nastavenie optimálnej oblasti zobrazenia kontajnera na prichytenie. Je to užitočné, ak má nádoba prvky, ako napríklad pevnú hlavičku, ktorá by zakrývala prvky vo vnútri, alebo ak posúvateľná nádoba potrebuje určitý priestor, aby dala vnútorným prvkom priestor na dýchanie, hneď ako „zapadnú“ do svojej polohy.

Jednoduchým príkladom je scroll-paddingvytvorenie určitej pevnej medzery 50pxv hornej a ľavej časti kontajnera:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Ružové oblasti zobrazujú polstrovanie rolovania na kontajneri na rolovanie.

Syntax

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

Dôležitá poznámka k príkazom longhands: Chrome v súčasnosti nepodporuje formát ručnej tlače scroll-paddingani scroll-marginvlastnosti. Pre maximálnu podporu prehľadávača použite skratku. Viac podrobností a aktuálneho stavu nájdete v tomto čísle v prehľadávači chýb chrómu.

Hodnoty

scroll-padding akceptuje nasledujúce hodnoty:

  • autoponecháva výplň, ktorú určí prehliadač / user-agent. Spravidla to znamená hodnotu 0px, ale môže byť nenulová, ak sa užívateľský agent rozhodne, že je vhodnejšia iná hodnota.
  • je napísaný podobné paddinga ďalšie vlastnosti, kde môže byť hodnota definovaná s jednotkami ( px, em, vh, atď.) alebo ako percento z obalu samotného.

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