Een inleiding tot CSS Scroll Snap Points

De CSS Scroll Snap Module is een webstandaard die ons enige controle geeft scrollen op een webpagina zodat we gebruikers naar bepaalde delen van een pagina kunnen laten scrollen in plaats van naar elke plek op een pagina.

scrollen is een van de meest uitgevoerde acties op een website. Browsers, door de jaren heen, hebben verbeterde hun scrollprestaties om de behendige vingersterkte van gebruikers te evenaren. En ontwikkelaars hebben gebruikt creatief scrollen om een ​​betere of een out-of-the-box gebruikerservaring te bereiken.

Echter, als het gaat om de correlatie tussen coderen en scrollen, alleen JavaScript leek enige controle over de laatste te hebben. Dit was zo voor een lange tijd, maar met de introductie van scrol snap punten, CSS begon de achterstand in te halen.

Scrollen zonder schuifknippunten

Meestal scrollen we niet erg traag, vooral op telefoons. Hoe sneller je scrolt, hoe minder controle je over hebt waar je op het scherm terechtkomt wanneer u bent gestopt met scrollen.

Stel u voor dat u door een reeks productafbeeldingen op een website of een galerij met foto's of online dia's bladert. Wat u in dergelijke toepassingen verkiest, is om zie het hele product, foto of dia elke keer dat je scrolt. Niet alleen een een deel van de productafbeelding, foto of dia.

Op de onderstaande demo kunt u bijvoorbeeld zien wanneer de gebruiker stopt met bladeren ongeveer de helft van de afbeelding is zichtbaar onderaan het scherm. De meeste gebruikers zien echter liever dat de laatste afbeelding volledig wordt weergegeven.

Scrollen met schuifknippunten

Dit is waar we naar toe brengen CSS-schuifknippunten. De naam spreekt voor zich; het is een CSS-standaard die ons in staat stelt om klik items op hun plaats tijdens het scrollen.

Er zijn vijf CSS-eigenschappen die deze standaard vormen:

1. scroll-snap-type
2. rol-snap-punten-x
3. rol-snap-punten-y
4. scroll-snap-coördinaat
5. scroll-snap-bestemming

Browserondersteuning

De eigenschappen nodig hebben -webkit en -Mevrouw voorvoegsels voor de relevante browsers. Vanaf het moment dat dit artikel is geschreven, wordt de CSS-schuifbalk niet ondersteund in Chrome en Opera.

Houd er rekening mee dat de laatste vier eigenschappen in de nabije toekomst waarschijnlijk door gebruikersagenten zullen worden verwijderd. In plaats daarvan, nieuwe eigenschappen, namelijk scroll-snap-align, scroll-snap-margin, en scroll-snap-padding, kan worden gemaakt, zoals gedefinieerd in deze specificatie.

Ze zullen dat echter wel doen een soortgelijk doel hebben als de vorige eigenschappen. Op dit moment werkt de voormalige verzameling eigenschappen prima.

eigenschappen

Je moet voeg het toe scroll-snap-type eigenschap van de schuifcontainer (het containerelement waarvan de kinderen overlopen tijdens het scrollen). Het specificeert de striktheid van de snap-actie. Het kan drie waarden aannemen:

1. verplicht - wanneer het scrollen is voltooid, zal het scrollen klik op een relevant snappunt
2. nabijheid - minder streng dan verplicht; het zal afhankelijk van het oordeel van de UA of het element op een bepaald snappunt klikt
3. geen - er is geen klik gedaan

De rol-snap-punten-x en rol-snap-punten-y eigenschappen behoren tot de scrollcontainer, te. Ze verwijzen naar punten op de x- en y-as waar de knikpunten zullen bestaan. Hun waarde is gegeven door de herhaling() functie. Als u bijvoorbeeld momentpunten langs de x-as wilt toevoegen met het interval van 100px je moet de gebruiken scroll-snap-points-x: repeat (100px) regel.

De scroll-snap-bestemming eigenschap wordt ook toegevoegd aan de schuifcontainer. Het definieert een coördinaat op de container waar een snapbestemming ligt. Het is op deze snapbestemming waar de kinderen van de container op hun plaats klikken wanneer ze scrollen.

U kunt de scroll-snap-coördinaat eigendom in combinatie met scroll-snap-bestemming. U moet het toevoegen aan de onderliggende elementen van de container. Het definieert de coördinaten van onderliggende elementen, die uitlijnt met de bestemmingscoördinaten van hun scrollcontainer wanneer de gebruiker door het scherm scrolt.

Let op: u hoeft niet alle eigenschappen tegelijk te gebruiken. Enkel en alleen scroll-snap-type is verplicht. Daarnaast kunt u afzonderlijke knikpunten definiëren of de combinatie bestemming-coördinaat gebruiken.

Code voorbeeld

Hier is een voorbeeld van een codefragment voor een typische rolcontainer, met scrollen in verticale richting & enkele afbeeldingen binnenin. Het geeft de demo weer die je kunt vinden aan het begin van dit bericht.

 div width: 300px; hoogte: 300 px; overflow: auto; ... div> img width: 250px; hoogte: 150 px; ... 

Nu we voeg wat knikpunten toe naar de scrollcontainer:

 div width: 300px; overloop: auto; scroll-snap-points-y: repeat (150px); scroll-snap-type: verplicht;  

Hieronder ziet u hoe de uitvoer eruit ziet met CSS-snap-punten toegevoegd. Let op wanneer het scrollen stopt terwijl de onderste afbeelding slechts gedeeltelijk zichtbaar is, de volledige afbeelding verschijnt nadat de scrollpoort in een magnetisch punt erboven klikt.