Johdatus CSS Scroll Snap -pisteisiin

CSS Scroll Snap -moduuli on web-standardi, joka antaa meille jonkin verran valvontaa vierittämällä verkkosivulla jotta voimme tehdä käyttäjistä selaamisen tiettyihin sivun osiin eikä vain mihinkään sen päälle.

vieritys on yksi verkkosivuston suoritetuimmista toimista. Selaimet ovat vuosien varrella parannettu niiden vieritystehoa vastaamaan käyttäjien ketterää sormivoimaa. Ja kehittäjät ovat käytetty vierittämällä luovasti jotta saavutettaisiin parempi tai out-of-box-käyttäjäkokemus.

Kuitenkin, kun kyse on korrelaatiosta koodaus ja vieritys, vain JavaScript näytti olevan minkäänlaista määräysvaltaa viimeksi mainitun suhteen. Tämä oli niin pitkään, mutta vierityspisteiden käyttöönotto, CSS alkoi kiinni.

Vierittäminen ilman vierityspisteitä

Tyypillisesti emme selaa kovin hitaasti, varsinkin puhelimissa. Mitä nopeammin vierität, sitä vähemmän hallintaa sinulla on yli missä näytöllä päädyt kun olet lopettanut selaamisen.

Kuvittele, että selaat verkkosivuston tuotekuvan joukkoa tai valokuvien galleriaa tai online-dioja. Mitä haluat tällaisissa sovelluksissa, on katso koko tuote, kuva tai dia joka kerta, kun selaat. Ei vain a osa tuotteen kuva, kuva tai dia.

Esimerkiksi alla olevassa demossa näet vain, kun käyttäjä lopettaa selaamisen vain noin puolet kuvasta on näkyvissä näytön alareunassa. Useimmat käyttäjät haluaisivat kuitenkin nähdä viimeisen kuvan kokonaan.

Vierittäminen vierityspisteiden avulla

Täällä me tuomme sisään CSS-vierityspainikkeet. Nimi on itsestään selvä; se on CSS-standardi, jonka avulla voimme napsauta kohteita paikalleen kun selaat.

On viisi CSS-ominaisuutta jotka muodostavat tämän standardin:

1. selaa-snap-tyyppinen
2. vierittää-snap-pisteiden-x
3. vierittää-snap-pisteiden-y
4. selaa-snap-koordinaatti
5. selaa-snap-kohde

Selaimen tuki

Ominaisuudet tarve -webKit ja -neiti etuliitteet kyseisille selaimille. Tämän artikkelin kirjoittamisen jälkeen CSS-vierityspainiketta ei tueta Chrome- ja Opera-ohjelmissa.

Huomaa, että käyttäjäagentit pudottavat neljä viimeistä ominaisuutta todennäköisesti lähitulevaisuudessa. Sen sijaan, uusia ominaisuuksia, nimittäin selaa-snap-align, selaa-snap-marginaali, ja selaa-snap-pehmuste, saatetaan luoda, kuten tässä selityksessä määritellään.

He kuitenkin on samanlainen tarkoitus kuten entiset ominaisuudet. Tällä hetkellä entinen ominaisuusjoukko toimii hyvin.

ominaisuudet

Sinun täytyy lisää selaa-snap-tyyppinen ominaisuus vierityspakkaukseen (konttielementti, jonka lapset ovat täynnä, kun se on vieritetty). Siinä määritellään Snap-toiminnan tiukkuus. Se voi kestää kolme arvoa:

1. pakollinen - Kun vieritys on valmis, vieritys tulee napsauta asiaankuuluvaa napsautuspistettä
2. läheisyys - vähemmän tiukka kuin pakollinen; se tulee riippuu tuomarin tuomiosta UA onko elementti napsahtaa tiettyyn napsautuspisteeseen
3. ei mitään - mitään katkaisua ei tehdä

vierittää-snap-pisteiden-x ja vierittää-snap-pisteiden-y ominaisuudet kuuluvat vierityskonttiin, liian. Ne viittaavat pisteisiin x- ja y-akselilla, joissa napsautuspisteet ovat. Niiden arvo on on antanut toistaa() toimia. Esimerkiksi jos haluat lisätä snap-pisteitä x-akselilla välillä 100px sinun täytyy käyttää vieritä snap-pisteitä-x: toista (100px) sääntö.

selaa-snap-kohde ominaisuus lisätään myös vierityskonttiin. Se määrittää koordinaatin säiliössä jossa on snap-kohde. Tällöin kontin lapset napsahtavat paikalleen, kun ne vierittävät.

Voit käyttää selaa-snap-koordinaatti omaisuutta yhdessä selaa-snap-kohde. Sinun täytyy lisätä se kontin lapsen elementteihin. Se määrittää lapsielementtien koordinaatit, joka kohdistuu vierityspakkauksen määränpään koordinaatteihin, kun käyttäjä vierittää näyttöä.

Huomaa, että sinun ei tarvitse käyttää kaikkia ominaisuuksia kerralla. Vain selaa-snap-tyyppinen on pakollinen. Tämän lisäksi voit joko määrittää yksittäisiä napsautuspisteitä tai käyttää kohde-koordinaattien yhdistelmää.

Koodin esimerkki

Tässä on esimerkkikoodinpätkä a tyypillinen vierityspakkaus, kanssa vierittämällä pystysuunnassa ja joitakin kuvia sisällä. Se lähettää demon, jonka löydät tämän viestin alusta.

 div leveys: 300px; korkeus: 300px; ylivuoto: auto;… div> img leveys: 250px; korkeus: 150px;… 

Nyt me lisää joitakin snap-pisteitä selaussäiliöön:

 div leveys: 300px; ylivuoto: auto; scroll-snap-points-y: toista (150px); scroll-snap-type: pakollinen;  

Alla näet, miten tuloste näyttää CSS-napsautuspisteet lisättiin. Huomaa aina, kun vieritys pysähtyy, kun alempi kuva näkyy vain osittain näyttöön tulee koko kuva sen jälkeen, kun vieritysalue napsahtaa sen yläpuolelle.