En introduktion till CSS Scroll Snap Points

De CSS Scroll Snap Module är en webbstandard som ger oss lite kontroll över rullar på en webbsida så att vi kan göra användarna bläddra till vissa delar av en sida i stället för att bara var som helst på den.

rullning är en av de mest genomförda åtgärderna på en webbplats. Webbläsare, genom åren, har förbättrade deras rullningsprestanda för att matcha användarnas smidiga fingerstyrka. Och utvecklare har Används scrollande kreativt för att uppnå en bättre eller en out-of-the-box användarupplevelse.

Men när det gäller korrelationen mellan kodning och rullning, bara JavaScript verkade ha någon kontroll över den senare. Detta var så länge, men med införande av snapspoints, CSS började komma ikapp.

Scrolling utan scroll snap punkter

Vanligtvis rullar vi inte mycket långsamt, särskilt på telefoner. Ju snabbare du rullar desto mindre kontroll har du över var på skärmen kommer du hamna när du slutade bläddra.

Tänk dig att du rullar igenom en rad produktbilder på en webbplats, eller ett galleri med foton eller online-bilder. Vad du föredrar i sådana applikationer är att se hela produkten, fotot eller bilden varje gång du bläddrar. Inte bara a del av produktbilden, bilden eller bilden.

Till exempel, på demo nedan kan du se när användaren slutar bläddra, bara ungefär hälften av bilden är synlig längst ned på skärmen. Men de flesta användare föredrar att se den sista bilden helt.

Scrolling med scroll snap punkter

Det är här vi tar in CSS-rullningspunkter. Namnet är självförklarande; Det är en CSS-standard som tillåter oss att snäpp objekt på plats när du bläddrar.

Det finns fem CSS-egenskaper som utgör denna standard:

1. bläddra-snap-typ
2. bläddra-snap-points-x
3. bläddra-snap-punkter-y
4. bläddra-snap-koordinat
5. bläddra-snap-destination

Webbläsarstöd

Egenskaperna behöver -webkit och -Fröken prefix för relevanta webbläsare. När du skriver den här artikeln stöds inte CSS scroll snap i Chrome och Opera.

Observera att de sista fyra egenskaperna sannolikt kommer att släppas av användaragenter inom en snar framtid. Istället, nya fastigheter, nämligen bläddra-snap-align, bläddra-snap-marginal, och bläddra-snap-stoppning, kan skapas, såsom definieras i denna beskrivning.

Men de kommer att har en liknande syfte som de tidigare egenskaperna. För närvarande fungerar den tidigare uppsättningen egenskaper bara bra.

Egenskaper

Du behöver Lägg till bläddra-snap-typ egenskap till rullningsbehållaren (behållarelementet vars barn överflödar medan det rullas). Det specificerar stränghet av snap-åtgärden. Det kan ta tre värden:

1. obligatorisk - när rullningen är klar rullar rullningen Snap vid en relevant snap punkt
2. anslutning - mindre sträng än obligatorisk; Det kommer beror på domen av UA om elementet kommer att snäppa vid en given snäpppunkt
3. ingen - ingen snäppning är klar

De bläddra-snap-points-x och bläddra-snap-punkter-y egenskaper tillhör rullningsbehållaren, för. De hänvisar till punkter på x- och y-axeln där snäpppunkterna kommer att existera. Deras värde är ges av upprepa() fungera. Om du till exempel vill lägga till snap-punkter längs x-axeln i intervallet av 100px du måste använda Scroll-Snap-Points-x: Repeat (100px) regel.

De bläddra-snap-destination Egenskapen läggs också till i rullningsbehållaren. Det definierar en koordinat på behållaren där en snap destination ligger. Det är vid denna snap destination där behållarens barn snäpps fast när de rullas.

Du kan använda bläddra-snap-koordinat egendom i samband med bläddra-snap-destination. Du måste lägga till den i behållarens barnelement. Det definierar koordinater för barnelement, som kommer att anpassa sig till destinationskoordinaterna för deras rullningsbehållare när användaren bläddrar på skärmen.

Observera att du inte behöver använda alla egenskaper samtidigt. Endast bläddra-snap-typ är obligatorisk. Tillsammans med det kan du antingen definiera individuella snap-punkter eller använda destinationskoordinatkombinationen.

Kod exempel

Här är ett exempel kodbit för a typisk rullningsbehållare, med rullar i vertikal riktning och några bilder inuti. Den visar den demo du kan hitta i början av det här inlägget.

 div bredd: 300px; höjd: 300px; överflöde: auto; ... div> img bredd: 250px; höjd: 150px; ... 

Nu vi lägg till några snap-poäng till rullningsbehållaren:

 div bredd: 300px; överflöde: auto; Scroll-snap-points-y: Repeat (150px); scroll-snap-typ: obligatorisk;  

Nedan kan du se hur produktionen ser ut med CSS snap poäng tillagd. Lägg märke till när varje gång rullningen stannar medan den undre bilden bara är delvis synlig, så kommer full bild visas efter att scrollporten snäpps in i en snäpppunkt ovanför den.