Uvod v CSS Scroll Snap Points

The CSS Scroll Snap modul je spletni standard, ki nam daje določen nadzor pomikanjem po spletni strani tako da bomo lahko uporabili, da se pomaknete na določene dele strani in ne samo kjerkoli na njem.

Pomikanje je ena najbolj izvajanih dejanj na spletnem mestu. Brskalniki so v preteklih letih imeli izboljšalo njihovo drsno zmogljivost prilagoditi agilnost prstov uporabnikov. In razvijalci so ustvarjalno drsenje da bi dosegli boljšo ali izven uporabniško izkušnjo.

Vendar, ko gre za povezavo med kodiranje in drsenje, Zdelo se je, da ima JavaScript le še kakšen nadzor nad slednjim. To je bilo tako dolgo časa, toda z uvedba scroll snap točk, CSS je začel dohajati.

Pomikanje brez točk za pomikanje

Ponavadi se ne pomikamo zelo počasi, zlasti pri telefonih. Hitreje se pomikate, manj nadzora imate kjer boste na zaslonu končali ko ste se nehali pomikati.

Predstavljajte si, da se pomikate po nizu slike izdelka na spletnem mestu ali v galeriji fotografij ali spletnih diapozitivov. V takih aplikacijah bi raje izbrali si oglejte celoten izdelek, fotografijo ali diapozitiv vsakič, ko se pomaknete. Ne samo a del slike, fotografije ali diapozitiva izdelka.

Na primer, na spodnji predstavitvi lahko vidite, kadar se uporabnik ustavi, samo vidna je približno polovica slike na dnu zaslona. Vendar pa večina uporabnikov raje vidi zadnjo sliko v celoti.

Pomikanje s točkami za pomikanje

Tukaj prinašamo CSS se pomakne na točke za pripenjanje. Ime je samoumevno; to je CSS standard, ki nam omogoča vstavite elemente na svoje mesto med pomikanjem.

Obstajajo pet lastnosti CSS ki sestavljajo ta standard:

1. tipka za pomikanje
2. scroll-snap-points-x
3. scroll-snap-points-y
4. pomikanje-snap-koordinata
5. scroll-snap-destination

Podpora za brskalnik

Lastnosti potrebujejo -webkit in -gospa predponami za ustrezne brskalnike. Ob pisanju tega članka v orodju Chrome in Opera operacijski sistem CSS ne omogoča podpore.

Upoštevajte, da bodo uporabniški agenti v bližnji prihodnosti verjetno opustili zadnje štiri lastnosti. Namesto tega, nove lastnosti, namreč scroll-snap-align, pomaknite se-rob, in drsno-snap-padding, mogoče ustvariti, kot je opredeljeno v tej specifikaciji.

Vendar pa bodo imajo podoben namen kot nekdanje lastnosti. Trenutno bo nekdanji nabor lastnosti dobro deloval.

Lastnosti

Moraš dodajte tipka za pomikanje premikate vsebino (element kontejnerja, katerega otroci so polni, medtem ko se premika). Določa strogost hitrega ukrepanja. Lahko ima tri vrednosti:

1. obvezno - ko se pomikanje konča, se bo pomikanje končalo zaskoči na ustrezno točko snap
2. bližine - manj stroga kot obvezno; bo odvisna od presoje. \ t UA ali se bo element zaskočil na dani točki snap
3. nobena - ni posnetka

The scroll-snap-points-x in scroll-snap-points-y lastnosti pripadajo pomnilniškemu vsebniku, tudi. Nanašajo se na točke na osi x in y, kjer bodo obstajale točke snap. Njihova vrednost je ki jih daje ponovite () funkcijo. Na primer, če želite dodati točke pripenjanja vzdolž osi x v presledku 100px morate uporabiti scroll-snap-points-x: repeat (100px) pravilo.

The scroll-snap-destination v vsebnik za pomikanje se doda tudi lastnost. To določa koordinato na vsebniku kjer leži snap destinacija. Pri tem snap destinaciji, kjer bodo otroci posode zaskočili na mesto, ko se bodo premikali.

Uporabite lahko pomikanje-snap-koordinata v povezavi z scroll-snap-destination. Dodati ga morate otrokovim elementom vsebnika. To določa koordinate podrejenih elementov, ko se bo uporabnik pomaknil po zaslonu, se bo s ciljnimi koordinatami pomikanja pomaknil.

Upoštevajte, da vam ni treba uporabljati vseh lastnosti naenkrat. Samo tipka za pomikanje obvezno. Poleg tega lahko definirate posamezne točke snap ali uporabite kombinacijo ciljne koordinate.

Primer kode

Tukaj je primer odrezka kode za a tipičen pomikalni vsebnik, z pomikanje v navpični smeri in nekaj slik znotraj. Izpisuje demo, ki ga lahko najdete na začetku te objave.

 div širina: 300px; višina: 300px; overflow: auto;… div> img širina: 250px; višina: 150px;… 

Zdaj, mi dodajte nekaj točk za pripenjanje v vsebnik za pomikanje:

 div širina: 300px; overflow: auto; scroll-snap-points-y: ponovite (150px); scroll-snap-type: obvezno;  

Spodaj si lahko ogledate, kako izgleda izhod Dodane so točke CSS. Opazujte vsakič, ko se drsenje ustavi, medtem ko je spodnja slika le delno vidna prikaže se celotna slika po tem, ko se pomikanje pomakne na točko snapanja nad njo.