Úvod do CSS Scroll Snap bodů

Modul CSS Scroll Snap Module je webový standard, který nám dává určitou kontrolu rolování na webové stránce tak, abychom mohli uživatele posouvat spíše na určité části stránky než na jakékoli místo.

Rolování je jednou z nejvíce prováděných akcí na webu. Prohlížeče mají v průběhu let zlepšení jejich posouvání tak, aby odpovídala hbité prstové síle uživatelů. A vývojáři mají kreativně dosáhnout lepšího nebo lepšího uživatelského prostředí.

Nicméně, pokud jde o vztah mezi kódování a posouvání, Zdálo se, že pouze JavaScript má nad druhou moc. To bylo tak dlouho, ale s zavedení rolovacích západek, CSS začala dohnat.

Posouvání bez rolovacích bodů

Typicky, my nemůžeme posouvat velmi pomalu, zejména na telefonech. Čím rychleji se posouváte, tím méně ovládáte kde na obrazovce skončíte když přestanete rolovat.

Představte si, že procházíte řadou obrázků produktu na webu nebo galerií fotografií nebo snímků online. To, co byste v takových aplikacích preferovali, je zobrazit celý produkt, fotografii nebo snímek při každém rolování. Nejen a část obrázku, fotografie nebo snímku.

Například v ukázce níže můžete vidět, kdy uživatel přestane rolovat pouze asi polovina obrazu je viditelná v dolní části obrazovky. Většina uživatelů by však raději viděla poslední obrázek úplně.

Posouvání rolovacích bodů

To je místo, kde jsme přinesli Přichytávací body CSS. Jméno je samo-vysvětlující; je to standard CSS, který nám umožňuje zaklapněte předměty na místo při rolování.

Existují pět vlastností CSS které tvoří tento standard:

1. posuvného typu
2. posuvné body-x
3. rolovacích bodů-y
4. posuvná koordinace
5. cílové místo rolování

Podpora prohlížeče

Vlastnosti potřeba -webkit a -slečna předpony pro příslušné prohlížeče. Jak psát tento článek, CSS scroll snap není podporován v Chrome a Opera.

Poslední čtyři vlastnosti budou pravděpodobně agenty uživatelů v blízké budoucnosti pravděpodobně zrušeny. Místo toho, nové vlastnosti, a to posuvné vyrovnání, scroll-snap-margin, a rolovací vycpávka, mohou být vytvořeny, jak je definováno v této specifikaci.

Budou však mají podobný účel jako dřívější vlastnosti. V současné době bude bývalý soubor nemovitostí fungovat.

Vlastnosti

Musíš přidat posuvného typu vlastnost na kontejner svitku (prvek kontejneru, jehož děti přetékají, když je rolován). Určuje přísnost zaklapávací akce. Může mít tři hodnoty:

1. povinné - Po dokončení rolování bude rolování pokračovat zaklapnutí v příslušném bodu zaklapnutí
2. blízkost - méně přísné než povinné; bude závisí na úsudku UA zda se prvek zaklapne na daný bod zaklapnutí
3. žádný - nedochází k přichycení

posuvné body-x a rolovacích bodů-y vlastnosti patří do rolovacího kontejneru, také. Vztahují se na body na ose x a y, kde budou existovat záchytné body. Jejich hodnota je udává opakovat() funkce. Například, pokud chcete přidat body přichycení podél osy x v intervalu 100px musíte použít posuvné body-x: opakování (100px) pravidlo.

cílové místo rolování vlastnost je také přidána do kontejneru scroll. To definuje souřadnici na kontejneru kde leží cílové místo. To je v této cílové místo, kde děti kontejneru zapadnou na místo při posouvání.

Můžete použít posuvná koordinace ve spojení s cílové místo rolování. Musíte ji přidat do podřízených prvků kontejneru. To definuje souřadnice podřízených prvků, Pokud se uživatel posouvá po obrazovce, bude zarovnán s cílovými souřadnicemi kontejneru svitku.

Všimněte si, že nemusíte používat všechny vlastnosti najednou. Pouze posuvného typu je povinná. Spolu s tím můžete definovat jednotlivé body přichycení nebo použít kombinaci souřadnic cíle.

Příklad kódu

Zde je příklad fragmentu kódu pro a typický svinovací kontejner, s posouvání ve svislém směru a některé obrázky uvnitř. Výstupem je demo, které najdete na začátku tohoto příspěvku.

 div width: 300px; výška: 300px; overflow: auto;… div> img width: 250px; výška: 150px;… 

Teď, my přidejte pár uchopovacích bodů do kontejneru pro posouvání:

 div width: 300px; přetečení: auto; scroll-snap-points-y: opakování (150px); typ rolování: povinné;  

Níže vidíte, jak vypadá výstup Přidány CSS snap body. Všimněte si vždy, když se rolování zastaví, zatímco spodní obrázek je viditelný pouze částečně zobrazí se celý obraz poté, co se scrollport zasune do bodu zaklapnutí nad ním.