Úvod do bodov CSS Scroll Snap

Modul CSS Scroll Snap je webový štandard, ktorý nám dáva určitú kontrolu rolovanie na webovej stránke aby sme mohli používateľov posúvať na určité časti stránky, a nie len na kdekoľvek.

rolovanie je jednou z najviac vykonaných akcií na webových stránkach. Prehliadače, v priebehu rokov, majú zlepšili ich rolovanie aby sa prispôsobili silným silám prstov používateľov. A vývojári majú použil kreatívne posúvanie aby ste dosiahli lepšie alebo lepšie skúsenosti používateľov.

Avšak, pokiaľ ide o vzťah medzi kódovanie a rolovanie, iba JavaScript mal akúkoľvek kontrolu nad druhým. Toto bolo dlhé obdobie, ale s zavedenie špičkových bodov, CSS začala doháňať.

Posúvanie bez bodov posúvania

Zvyčajne sa nepohybujeme veľmi pomaly, najmä na telefónoch. Čím rýchlejšie rolujete, tým menšia je kontrola kde na obrazovke skončíte keď ste prerušili rolovanie.

Predstavte si, že prechádzate poľa obrázka produktu na webovej stránke alebo galérie fotografií alebo online snímok. Čo chcete v takýchto aplikáciách je pozrite si celý produkt, fotografiu alebo snímku pri každom posúvaní. Nielen a časť obrázka, fotografie alebo snímky.

Napríklad v nižšie uvedenej ukážke môžete vidieť vždy, keď používateľ prestane posúvať iba približne polovica obrázka je viditeľná v spodnej časti obrazovky. Väčšina používateľov by však radšej videl úplne posledný obrázok.

Posúvanie pomocou posuvných bodov

To je miesto, kde prinášame CSS snap body posúvania. Názov je samozrejmé; je to štandard CSS, ktorý nám umožňuje zachyťte položky na miesto pri rolovaní.

Existujú päť vlastností CSS ktoré tvoria tento štandard:

1. rolovanie-snap-type
2. rolovacie snap-body-x
3. rolovacie snap-body-y
4. rolovanie-snap-súradnicu
5. rolovanie-snap-cieľ

Podpora prehliadača

Vlastnosti potrebovať -WebKit a -pani predpony pre príslušné prehliadače. Od písania tohto článku nie je v prehliadači Chrome a Opera podporovaná funkcia posunu posúvania CSS.

Všimnite si, že posledné štyri vlastnosti budú pravdepodobne v blízkej budúcnosti spúšťané užívateľskými agentmi. namiesto, nové vlastnosti, a to rolovanie-snap-align, rolovanie-snap-margin, a rolovanie-snap-padding, možno vytvoriť, ako je definované v tejto špecifikácii.

Avšak, oni budú mať podobný účel ako bývalé vlastnosti. V súčasnej dobe bude bývalý súbor nehnuteľností fungovať v pohode.

vlastnosti

Musíte pridajte rolovanie-snap-type vlastnosť na rolovanie kontajnera (kontajnerový prvok, ktorého deti sú počas prehliadania pretekajúce). Špecifikuje prísnosť zachytenia. Môže trvať tri hodnoty:

1. povinná - po dokončení posúvania sa posúvanie uskutoční zachyťte na príslušnom úchytke
2. blízkosť - menej prísne ako povinná; to bude závisí od posúdenia UA či sa prvok zachyti na danom mieste zachytenia
3. nikto - bez snapovania

rolovacie snap-body-x a rolovacie snap-body-y vlastnosti patria do posuvnej nádoby, tiež. Odkazujú na body na osi x a y, kde budú existovať snap body. Ich hodnota je daná spoločnosťou opakovať () funkcie. Ak napríklad chcete pridať snap body pozdĺž osi x v intervale 100px musíte použiť scroll-snap-points-x: opakovanie (100px) pravidlo.

rolovanie-snap-cieľ Vlastnosť je tiež pridaná do navigačného kontajnera. to definuje súradnicu na kontajneri kde leží cieľový cieľ. Práve v tomto okamžiku, kde sa deti kontajneru zapadnú na miesto, keď sa posúvajú.

Môžete použiť rolovanie-snap-súradnicu majetok v spojení s rolovanie-snap-cieľ. Musíte ju pridať do podradených elementov kontajnera. to definuje súradnice podradných prvkov, ktoré sa budú zhodovať s cieľovými súradnicami ich posuvného kontajnera, keď používateľ posúva obrazovku.

Upozorňujeme, že nemusíte používať všetky vlastnosti naraz. iba rolovanie-snap-type je povinné. Spolu s tým môžete buď definovať jednotlivé snap body, alebo použiť kombináciu cieľovej koordináty.

Príklad kódu

Tu je príklad útržku kódu pre a typický posuvný kontajner, s posúvanie vo vertikálnom smere a niektoré obrázky vo vnútri. Zobrazuje demo, ktoré nájdete na začiatku tohto príspevku.

 div šírka: 300px; výška: 300px; pretečenie: auto; ... div> img width: 250px; výška: 150px; ... 

Teraz, my pridajte niektoré snap body na posuvný kontajner:

 div šírka: 300px; pretečenie: auto; scroll-snap-points-y: opakovanie (150px); typ posuvu: povinné;  

Nižšie uvidíte, ako vyzerá výstup CSS snap points pridané. Všimnite si, kedykoľvek sa rolovanie zastaví, zatiaľ čo spodný obrázok je len čiastočne viditeľný zobrazí sa celý obrázok po tom, čo sa scrollport pripojí na bod zachytenia nad ním.