Sissejuhatus CSS Scroll Snap-punktidesse

The CSS Scroll Snap moodul on veebistandard, mis annab meile kontrolli veebilehe kerimine et saaksime kasutajaid sirvida pigem lehekülje teatud osadele, mitte lihtsalt kõikjale.

Kerimine on üks veebisaidi kõige edukamaid toiminguid. Brauserid on aastate jooksul olnud parandanud nende kerimisjõudlust sobitada kasutajate jõuline sõrmejõud. Ja arendajad on kasutasite loovalt kerimist parema või parema kasutuskogemuse saavutamiseks.

Siiski, kui tegemist on korrelatsiooniga kodeerimine ja kerimine, Ainult JavaScript tundus olevat mingit kontrolli viimase üle. See oli nii kaua aega, kuid kerimispiltide sisseviimine, CSS hakkas järele jõudma.

Kerimisnuppudeta kerimine

Tavaliselt ei liigu me eriti aeglaselt, eriti telefonides. Mida kiiremini te keriksite, seda vähem kontrolli sa oled kus ekraanil jõuad kui te lõpetasite kerimise.

Kujutage ette, et te liigute läbi veebisaidi tootevaliku või fotode või slaidide galeriis. Mida soovite sellistes rakendustes eelistada vaata kogu toodet, fotot või slaidi iga kerimise ajal. Mitte ainult a osa toote pildist, fotost või slaidist.

Näiteks allpool olevas demos näete ainult siis, kui kasutaja lõpetab kerimise umbes pool pildist on nähtav ekraani allosas. Enamik kasutajaid eelistaks siiski viimast pilti täielikult näha.

Kerimisnuppude abil kerimine

See on koht, kuhu me sisse toome CSS-i kerimise punktid. Nimi on iseenesestmõistetav; see on CSS-standard, mis võimaldab meil elemendid paigale kerimise ajal.

Seal on viis CSS-i omadust mis moodustavad selle standardi:

1. kerige snap-tüüpi
2. keri-snap-punktid-x
3. keri-snap-punktid-y
4. kerige snap-koordinaat
5. kerimis-snap-sihtkohta

Brauseri tugi

Omadused vajadus -webkit ja -Prl eesliited asjakohaste brauserite jaoks. Selle artikli kirjutamise ajal ei toetata Chrome'is ja Opera'is CSS-i kerimise klõpsatust.

Pange tähele, et viimased neli omadust lähevad lähitulevikus tõenäoliselt kasutajaagendi poolt. Selle asemel, uued omadused, nimelt kerige-snap-joondamine, kerige snap-marginaal, ja tõmmake snap-padding, võib olla loodud, nagu on määratletud käesolevas spetsifikatsioonis.

Kuid nad teevad seda sarnane eesmärk nagu endised omadused. Praegu töötab endine omaduste hulk hästi.

Omadused

Sa pead lisa kerige snap-tüüpi omadus kerimis konteinerisse (konteineri element, mille lapsed on kerimise ajal täis). See määratleb snap-tegevuse rangus. See võib võtta kolme väärtust:

1. kohustuslik - kui kerimine on lõppenud, kerib see kerimine klõpsa asjakohasele snap-punktile
2. lähedus - vähem ranged kui kohustuslik; see on sõltub Euroopa Kohtu otsusest UA kas element lukustub antud snap-punkti
3. mitte ükski - mingit lööki ei tehta

The keri-snap-punktid-x ja keri-snap-punktid-y omadused kuuluvad kerimiskonteinerisse, ka. Need viitavad punktidele, mis asuvad x- ja y-teljel, kus snap-punktid eksisteerivad. Nende väärtus on poolt antud korrake () funktsiooni. Näiteks, kui soovite lisada x-teljele snap-punkte, siis vahemikus 100tk peate kasutama keri-snap-punktid-x: kordamine (100tk) reegel.

The kerimis-snap-sihtkohta kerimismahutisse lisatakse ka vara. See määratleb konteineri koordinaadi kus asub sihtkoht. Sellel snap sihtkoha juures, kus konteineri lapsed klõpsamisel kohale klõpsavad.

Võite kasutada kerige snap-koordinaat vara koos kerimis-snap-sihtkohta. Peate selle konteineri lapse elementidesse lisama. See määratleb lapse elementide koordinaadid, mis joondab ekraani kerimise ajal oma kerimismahuti sihtkoordinaatidega.

Pange tähele, et te ei pea kõiki omadusi korraga kasutama. Ainult kerige snap-tüüpi on kohustuslik. Koos sellega saate määratleda üksikud snap-punktid või kasutada sihtkoordinaatide kombinatsiooni.

Koodi näide

Siin on näite kood a tüüpiline kerimiskonteiner, koos kerimine vertikaalsuunas ja mõned pildid sees. See väljastab demo, mille leiate selle postituse alguses.

 div laius: 300 px; kõrgus: 300 px; ülevool: auto;… div> img laius: 250 px; kõrgus: 150 px;… 

Nüüd, me lisage mõned snap-punktid kerimis konteinerisse:

 div laius: 300 px; ülevool: auto; scroll-snap-points-y: kordamine (150 px); scroll-snap-type: kohustuslik;  

Allpool on näha, kuidas väljund välja näeb Lisati CSS-i lisapunkte. Pange tähele, kui kerimine peatub, samal ajal kui alumine pilt on ainult osaliselt nähtav ilmub täielik pilt pärast seda, kui kerimisport klõpsab selle ülemisele punktile.