En introduktion til CSS Scroll Snap Points

Det CSS Scroll Snap Module er en webstandard, der giver os kontrol over ruller på en webside så vi kan få brugere til at rulle til bestemte dele af en side i stedet for bare hvor som helst på den.

rulning er en af ​​de mest udførte handlinger på en hjemmeside. Browsere har gennem årene haft forbedret deres rullende ydeevne for at matche brugerens smidige fingerstyrke. Og udviklere har brugt scrolling kreativt for at opnå en bedre eller en out-of-the-box brugeroplevelse.

Men når det kommer til sammenhængen mellem kodning og scrolling, Kun JavaScript syntes at have nogen kontrol over sidstnævnte. Dette var så i lang tid, men med introduktion af rulle snap punkter, CSS begyndte at indhente.

Scrolling uden scroll snap point

Typisk ruller vi ikke meget langsomt, især på telefoner. Jo hurtigere du ruller, jo mindre kontrol har du over hvor på skærmen kommer du til ende da du stoppede med at rulle.

Forestil dig, at du ruller gennem en vifte af produktbilleder på et websted, eller et galleri med fotos eller online dias. Hvad du foretrækker i sådanne applikationer er at se hele produkt, foto eller dias hver gang du ruller. Ikke kun a en del af produktbilledet, billedet eller diaset.

For eksempel kan du i demoen nedenfor se, når brugeren holder op med at rulle, kun omkring halvdelen af ​​billedet er synligt nederst på skærmen. Men de fleste brugere foretrækker at se det sidste billede fuldt ud.

Scrolling med scroll snap punkter

Det er her, vi tager med CSS rulle snap punkter. Navnet er selvforklarende; det er en CSS standard, der tillader os at snap elementer på plads når du ruller.

Der er fem CSS egenskaber der udgør denne standard:

1. rulle-snap-typen
2. rulle til-snap-points-x
3. rulle til-snap-point-y
4. rulle-snap-koordinat
5. rul-snap-destination

Browser support

Egenskaberne brug for -webKit og -Frk præfikser for de relevante browsere. Når du skriver denne artikel, understøttes CSS scroll snap ikke i Chrome og Opera.

Bemærk, at de sidste fire egenskaber sandsynligvis vil blive droppet af brugeragenter i den nærmeste fremtid. I stedet, nye ejendomme, nemlig rul-snap-align, rul-snap-margin, og rul-snap-polstring, kan oprettes, som defineret i denne beskrivelse.

Men de vil har et lignende formål som de tidligere egenskaber. I øjeblikket vil det tidligere sæt af egenskaber fungere fint.

Ejendomme

Du skal tilføj rulle-snap-typen ejendom til rullebeholderen (beholderelementet, hvis børn er overfyldte, mens det rulles). Det specificerer strenghed af snap action. Det kan tage tre værdier:

1. obligatorisk - Når rullingen er færdig, vil rullingen klik på et relevant snap point
2. nærhed - mindre strenge end obligatorisk; det vil afhænger af dommen af UA om elementet vil snappe på et givet snap point
3. ingen - ingen snapping er færdig

Det rulle til-snap-points-x og rulle til-snap-point-y ejendomme tilhører rullebeholderen, også. De henviser til punkter på x- og y-aksen, hvor snap-punkterne vil eksistere. Deres værdi er givet af gentage() fungere. For eksempel, hvis du vil tilføje snap-punkter langs x-aksen i intervallet af 100px du skal bruge scroll-snap-points-x: gentag (100px) Herske.

Det rul-snap-destination Egenskaben tilføjes også til rullebeholderen. Det definerer en koordinat på beholderen hvor en snap destination ligger. Det er på denne snap destination hvor beholderens børn vil snappe på plads, når de rulles.

Du kan bruge rulle-snap-koordinat ejendom i forbindelse med rul-snap-destination. Du skal føje det til beholderens barnelementer. Det definerer koordinaterne for barnelementer, som vil tilpasse sig deres destinationsblanket til deres rullebeholder, når brugeren ruller skærmen.

Bemærk, at du ikke behøver at bruge alle egenskaber på én gang. Kun rulle-snap-typen er obligatorisk. Sammen med det kan du enten definere individuelle snappunkter eller bruge destinationskoordinatkombinationen.

Kodeeksempel

Her er et eksempel kodestykke for a typisk rullebeholder, med ruller i lodret retning og nogle billeder inde. Den udsender den demo, du kan finde i begyndelsen af ​​dette indlæg.

 div bredde: 300px; højde: 300px; overløb: auto; ... div> img bredde: 250px; højde: 150px; ... 

Nu, vi Tilføj nogle snap point til rullebeholderen:

 div bredde: 300px; overløb: auto; scroll-snap-points-y: gentag (150px); scroll-snap-type: obligatorisk;  

Nedenfor kan du se, hvordan produktionen ser ud med CSS snap point tilføjet. Bemærk, når rullingen stopper, mens bundbilledet kun er delvist synligt, vil hele billedet vises efter at rulleporten klikker ind i et snappunkt over det.