Bevezetés a CSS Scroll Snap pontokba

A CSS Scroll Snap modul egy olyan webes szabvány, amely bizonyos irányítást ad nekünk görgetés a weboldalon úgy, hogy a felhasználók bizonyos oldalakra görgethessenek, nem pedig bárhol.

Gördülő az egyik legjobban végrehajtott akció egy weboldalon. A böngészők az évek során javította görgetési teljesítményüket a felhasználók agilis ujjerősségéhez. És a fejlesztők kreatívan görgetett a jobb, vagy a dobozon kívüli felhasználói élmény eléréséhez.

Azonban, ha a korrelációról van szó kódolás és görgetés, csak a JavaScript-nek látszott, hogy bármilyen mennyiségű ellenőrzést gyakorol az utóbbi felett. Ez hosszú időre volt, de a görgetési pontok bevezetése, A CSS felzárkózott.

Görgetés görgetési pontok nélkül

Jellemzően nem nagyon lassan görgetünk, különösen telefonokon. Minél gyorsabban görgetsz, annál kevesebb irányítást kapsz hol van a képernyőn a görgetés leállításakor.

Képzeld el, hogy a webhelyen vagy a fotók, vagy az online diák galériájában görgetsz egy termékcsoport képsorán. Amit az ilyen alkalmazásoknál szeretne, az a tekintse meg a teljes terméket, fotót vagy diavetítést minden alkalommal, amikor görget. Nem csak a rész a termék képének, fényképének vagy diajának.

Például az alábbi demóban csak akkor tekintheti meg, ha a felhasználó leállítja a görgetést a kép körülbelül fele látható a képernyő alján. A legtöbb felhasználó azonban inkább az utolsó képet látná.

Görgetés görgetési pontokkal

Itt hoztuk be CSS görgetési pontok. A név önmagától értetődő; ez egy CSS szabvány, amely lehetővé teszi számunkra elemeket a helyére görgetés közben.

Vannak öt CSS tulajdonság ez a szabvány:

1. görgetés beépülő típusú
2. Scroll beépülő pont-x
3. Scroll beépülő pont-y
4. görgetés beépülő koordináta
5. görgetés beépülő cél

Böngésző támogatás

A tulajdonságok szükség -webKit és -Kisasszony előtagok a böngészők számára. A cikk írása óta a Chrome és az Opera nem támogatja a CSS-görgetést.

Ne feledje, hogy a legutóbbi négy tulajdonságot valószínűleg a felhasználói ügynökök a közeljövőben eldobják. Helyette, új tulajdonságok, ugyanis görgetés beépülő align, görgetés beépülő árrés, és görgetés beépülő padding, lehet létrehozni, a leírásban meghatározottak szerint.

Mindazonáltal hasonló célt szolgálnak mint a korábbi tulajdonságok. Jelenleg a korábbi tulajdonságok csak jól fognak működni.

Tulajdonságok

Neked kell adja hozzá a görgetés beépülő típusú tulajdonság a görgetőedénybe (az a konténerelem, amelynek gyermekei túlcsordulnak a görgetés közben). Meghatározza a szigorúsága. Három értéket vehet fel:

1. kötelező - amikor a görgetés befejeződött, a görgetési művelet kattintsunk egy megfelelő pontra
2. közelség - kevésbé szigorú, mint kötelező; fog függ a UA hogy az elem egy adott kattintáspontnál fog-e kattanni
3. egyik sem - nincs megcsípés

A Scroll beépülő pont-x és Scroll beépülő pont-y tulajdonságok a görgető tartályhoz tartozik, is. Ezek az x- és y-tengely pontjaira vonatkoznak, ahol a kattintáspontok léteznek. Az értékük a ismétlés() funkció. Például, ha az x-tengely mentén egy pillanatnyi pontot szeretne hozzáadni 100px használnia kell a scroll-snap-points-x: ismétlés (100px) szabály.

A görgetés beépülő cél a görgetőedénybe is hozzáadódik a tulajdonság. Azt meghatározza a konténer koordinátáját ahol fekvő hely van. Ezen a helyszínen, ahol a konténer gyermekei görgetéskor beilleszkednek a helyére.

Használhatja a görgetés beépülő koordináta tulajdonságokkal együtt görgetés beépülő cél. Hozzá kell adnia a tartály gyermekelemeihez. Azt meghatározza a gyermekelemek koordinátáit, amely a görgető tartály cél koordinátáihoz igazodik, amikor a felhasználó görgeti a képernyőt.

Ne feledje, hogy nem kell minden tulajdonságot egyszerre használni. Csak görgetés beépülő típusú kötelező. Ezzel együtt megadhatja az egyes kattintáspontokat, vagy használhatja a cél-koordináta kombinációt.

Kódpélda

Itt van egy példa a kód kódrészletére a tipikus görgetőedény, val vel görgetés függőleges irányban és néhány kép belsejében. Kimeneti a demó, amelyet a hozzászólás elején talál.

 div szélesség: 300px; magasság: 300px; túlcsordulás: auto;… div> img szélesség: 250px; magasság: 150px;… 

Most mi adjunk hozzá néhány kattintáspontot a görgetőedénybe:

 div szélesség: 300px; túlcsordulás: auto; scroll-snap-point-y: ismétlés (150px); scroll-snap-type: kötelező;  

Az alábbiakban láthatjuk, hogyan néz ki a kimenet A hozzáadott CSS pontok hozzáadódtak. Figyelem, ha a görgetés leáll, míg az alsó kép csak részben látható, a megjelenik a teljes kép miután a görgetősáv bepillantást nyert egy fölötte lévõ pontba.