Įvadas į „CSS Scroll Snap Points“

The „CSS Scroll Snap“ modulis yra žiniatinklio standartas, leidžiantis mums kontroliuoti naršymas tinklalapyje taip, kad galėtume naudotojus pereiti prie tam tikrų puslapio dalių, o ne tik visur.

Slinkimas yra vienas iš labiausiai atliktų veiksmų tinklalapyje. Per metus naršyklės turi pagerino jų slinkimo našumą suderinti naudotojų judrumą. Ir kūrėjai turi naudojamas slinkimas kūrybiškai norint pasiekti geresnę arba nebrangią vartotojo patirtį.

Tačiau, kai kalbama apie koreliaciją tarp kodavimas ir slinkimas, Atrodo, kad tik „JavaScript“ kontroliuoja pastarąjį. Taip buvo ilgą laiką, bet su įvesti slinkties taškus, CSS pradėjo pasivyti.

Slinkimas be slinkties taškų

Paprastai mes nesirenkame labai lėtai, ypač telefonuose. Kuo greičiau slenkate, tuo mažiau kontroliuojate kur ekrane jūs baigsite nustojus slinkti.

Įsivaizduokite, kad naršote per gaminio atvaizdo masyvą svetainėje arba nuotraukų ar internetinių skaidrių galerijoje. Ką norite, kad tokios programos būtų žiūrėkite visą produktą, nuotrauką ar skaidrę kiekvieną kartą slinkdami. Ne tik a dalis produkto vaizdas, nuotrauka ar skaidrė.

Pavyzdžiui, žemiau esančioje demonstracijoje matysite tik tada, kai vartotojas nustoja slinkti matoma maždaug pusė vaizdo ekrano apačioje. Tačiau dauguma vartotojų pageidautų, kad paskutinis vaizdas būtų visiškai matomas.

Slinkimas su slinkties taškais

Tai yra vieta, į kurią mes įtraukiame CSS slinkties taškai. Pavadinimas yra savaime suprantamas; tai CSS standartas, leidžiantis mums įdėkite elementus į vietą slinkdami.

Yra penkios CSS savybės kurie sudaro šį standartą:

1. slinkties klavišas
2. slinkties mygtukai-x
3. slinkties mygtukai-y
4. suraskite koordinatorių
5. slinkties-snap-paskirties

Naršyklės palaikymas

Savybės reikia -žiniatinklio rinkinys ir -ms priešdėliai atitinkamoms naršyklėms. Rašant šį straipsnį „Chrome“ ir „Opera“ nepalaiko CSS slinkties klavišo.

Atkreipkite dėmesį, kad artimiausioje ateityje naudotojų agentai gali atsisakyti paskutinių keturių savybių. Vietoj to, naujų savybių, būtent slinkties klavišą, slinkties klavišą, ir slinkties klavišas, gali būti sukurta, kaip apibrėžta šioje specifikacijoje.

Tačiau jie turi panašų tikslą kaip buvusios savybės. Šiuo metu buvęs savybių rinkinys veiks puikiai.

Savybės

Tau reikia pridėkite slinkties klavišas turinys į slinkties talpyklą (konteinerio elementas, kurio vaikai yra perpildyti, kai jie slinkti). Ji nurodo griežtos veiksmų. Tai gali būti trys:

1. privaloma - kai slinkimas yra baigtas, slinkties bus užfiksuokite atitinkamą momentinį tašką
2. arti - mažiau griežtas nei privaloma; jis bus priklauso nuo teismo sprendimo UA ar elementas užsifiksuos tam tikru snapo tašku
3. nė vienas - Nieko nepadaryta

The slinkties mygtukai-x ir slinkties mygtukai-y savybės priklauso slinkties konteineriui, taip pat. Jie nurodo taškus, esančius x ir y ašyje, kur bus taškiniai taškai. Jų vertė yra . \ t pakartoti () funkcija. Pvz., Jei norite pridėti taškų taškus išilgai x ašies 100px jums reikia naudoti slinkties taškus-x: pakartoti (100px) taisyklė.

The slinkties-snap-paskirties nuosavybė taip pat įtraukiama į slinkties indą. Tai apibrėžia konteinerio koordinates kur slypi paskirties vieta. Būtent šiame siuntimo taške, kur konteinerio vaikai užsifiksuos, jie užsifiksuos.

Galite naudoti suraskite koordinatorių nuosavybė kartu su slinkties-snap-paskirties. Jūs turite jį pridėti prie konteinerio vaiko elementų. Tai apibrėžia vaikų elementų koordinates, kai vartotojas slenka ekraną, jis bus suderintas su jų slinkties talpyklos paskirties koordinatėmis.

Atminkite, kad nereikia naudoti visų savybių vienu metu. Tik slinkties klavišas yra privalomas. Kartu galite nustatyti atskirus taškinius taškus arba naudoti paskirties koordinatės derinį.

Kodo pavyzdys

Čia yra a kodo fragmento pavyzdys tipiškas slinkties indas, su slinkimas vertikaliai ir kai kurie vaizdai viduje. Jis siunčia demo, kurį galite rasti šio pranešimo pradžioje.

 div plotis: 300px; aukštis: 300px; perpildymas: auto;… div> img plotis: 250px; aukštis: 150px;… 

Dabar mes pridėkite kai kuriuos taškus į slinkties indą:

 div plotis: 300px; perpildymas: auto; scroll-snap-points-y: pakartoti (150px); slinkties klavišas: privalomas;  

Žemiau galite pamatyti, kaip išvaizda atrodo Įtraukti CSS taškai. Atkreipkite dėmesį, kai slinkimas sustoja, o apatinis vaizdas yra tik iš dalies matomas rodomas visas vaizdas po to, kai slinkties klavišas įsijungia į viršutinį tašką.