En introduksjon til CSS Scroll Snap Points

De CSS Scroll Snap Module er en nettstandard som gir oss litt kontroll over ruller på en nettside slik at vi kan få brukere til å bla til bestemte deler av en side i stedet for å bare hvor som helst på den.

rulle er en av de mest utførte handlinger på et nettsted. Nettlesere, gjennom årene, har forbedret rullingsytelsen for å matche brukerens smidige fingerstyrke. Og utviklere har Brukt rulling kreativt for å oppnå en bedre eller en utestengt brukeropplevelse.

Men når det gjelder korrelasjonen mellom koding og rulling, bare JavaScript syntes å ha noen kontroll over sistnevnte. Dette var så i lang tid, men med innføring av rulle snap poeng, CSS begynte å hente seg.

Rulling uten rullehåndteringspunkter

Vanligvis ruller vi ikke veldig sakte, spesielt på telefoner. Jo raskere du ruller, desto mindre kontroll har du over hvor på skjermen vil du ende opp når du sluttet å bla.

Tenk deg at du ruller gjennom en rekke produktbilder på et nettsted, eller et galleri med bilder eller elektroniske lysbilder. Det du foretrekker i slike applikasjoner er å se hele produktet, bildet eller lysbildet hver gang du ruller. Ikke bare a del av produktbildet, bildet eller lysbildet.

For eksempel, på demoen nedenfor kan du se når brukeren slutter å rulle, bare Omtrent halvparten av bildet er synlig nederst på skjermen. Imidlertid vil de fleste brukere foretrekke å se det siste bildet fullt ut.

Ruller med rullehåndteringspunkter

Det er her vi tar med CSS rulle snap poeng. Navnet er selvforklarende; Det er en CSS-standard som tillater oss å Fest elementer på plass når du ruller.

Det er fem CSS egenskaper som utgjør denne standarden:

1. bla-snap-typen
2. blar-snap-poeng-x
3. blar-snap-punkter-y
4. bla-snap-koordinat
5. bla-snap-destinasjon

Nettleserstøtte

Egenskapene trenge -webkit og -ms prefikser for de relevante nettleserne. Når du skriver denne artikkelen, støttes ikke CSS scroll snap i Chrome og Opera.

Vær oppmerksom på at de siste fire egenskapene sannsynligvis vil bli droppet av brukeragenter i nær fremtid. I stedet, nye eiendommer, nemlig bla-snap-Juster, bla-snap-margin, og bla-snap-polstring, kan bli opprettet, som definert i denne spesifikasjonen.

Men de vil har en lignende hensikt som de tidligere egenskapene. Foreløpig vil det tidligere settet av eiendommer fungere fint.

Eiendommer

Du trenger å Legg til bla-snap-typen eiendom til rullebeholderen (beholderelementet hvis barn går over mens det rulles). Det spesifiserer strenghet av snap handling. Det kan ta tre verdier:

1. påbudt, bindende - Når rullingen er ferdig, vil rullingen Snap på et relevant snap punkt
2. nærhet - mindre streng enn påbudt, bindende; det vil avhenger av dommen av UA om elementet vil snappe på et gitt snap punkt
3. ingen - ingen snakk er ferdig

De blar-snap-poeng-x og blar-snap-punkter-y eiendommer tilhører rullebeholderen, også. De refererer til punkter på x- og y-aksen der snapspoengene vil eksistere. Deres verdi er gitt av gjenta() funksjon. For eksempel, hvis du vil legge til snapspoeng langs x-aksen i intervallet av 100px du må bruke bla-snap-poeng-x: gjenta (100px) regel.

De bla-snap-destinasjon Egenskapen er også lagt til rullebeholderen. Den definerer en koordinat på beholderen hvor en snap destinasjon ligger. Det er på denne snap destinasjonen hvor beholderens barn vil snappe på plass når de rulles.

Du kan bruke bla-snap-koordinat eiendom i forbindelse med bla-snap-destinasjon. Du må legge den til beholderens barnelementer. Den definerer koordinatene til barnelementene, som vil justere seg med målkoordinatene til rullebeholderen når brukeren rulle på skjermen.

Merk at du ikke trenger å bruke alle egenskapene samtidig. Bare bla-snap-typen er obligatorisk. Sammen med det kan du enten definere individuelle snappunkter eller bruke destinasjonskoordinatkombinasjonen.

Kodeeksempel

Her er et eksempel kodestykke for a typisk rullebeholder, med Ruller i vertikal retning og noen bilder inni. Den sender ut demoen du finner i begynnelsen av dette innlegget.

 div bredde: 300px; høyde: 300px; overløp: auto; ... div> img bredde: 250px; høyde: 150px; ... 

Nå vi legg til noen snap poeng til rullebeholderen:

 div bredde: 300px; overløp: auto; bla-snap-poeng-y: gjenta (150px); Scroll-snap-type: Obligatorisk;  

Nedenfor kan du se hvordan produksjonen ser ut med CSS snap poeng lagt til. Legg merke til når rullingen stopper mens bunnbildet bare er delvis synlig, vil fullt bilde vises etter at rulleporten klikker inn i et knipunkt over det.