Vanaf Chrome 129 kun je de scrollSnapChange
en scrollSnapChanging
-gebeurtenissen uit JavaScript gebruiken. Door ingebouwde snap-gebeurtenissen te implementeren, wordt de voorheen onzichtbare snap-status op het juiste moment en altijd correct uitvoerbaar. Dit is geen gemak dat je had zonder deze gebeurtenissen.
Vóór scrollSnapChange
kon je een kruispuntwaarnemer gebruiken om te bepalen welk element de scrollpoort passeerde, maar het bepalen van wat er werd vastgemaakt was beperkt tot een paar omstandigheden. U kunt bijvoorbeeld detecteren of de snap-items de scrollpoort vullen of het grootste deel van de scrollpoort vullen. Om dit te doen, observeert u de elkaar kruisende elementen van het scrollgebied en neemt u, op basis van welk item het grootste deel van het scrollgebied in beslag neemt, aan dat dit het snapdoel was, wacht u vervolgens op scrollend
en handelt u naar het geklikte item (het snapdoel). .
Vóór scrollSnapChanging
was het echter onmogelijk om te weten wanneer het snapdoel verandert of waarin het wordt gewijzigd (zoals bij een scrollbeweging).
Er wordt een horizontale scroller weergegeven met daarin genummerde vakken als snapdoelen. Aan de linkerkant ziet u een realtime logboek van scrollSnapChange-gebeurtenissen, waarbij de snapTargetInline blauw is gemarkeerd. Aan de rechterkant ziet u een realtime logboek van scrollSnapChanging-gebeurtenissen, waarbij de snapTargetInline grijs wordt gemarkeerd.
Probeer het
https://codepen.io/web-dot-dev/pen/jOjaaEP
Geweldig nieuws, deze nieuwe evenementen maken deze informatie snel en eenvoudig beschikbaar. Dit ontgrendelt scroll-snap-interacties om verder te reiken dan hun huidige mogelijkheden en maakt de orkestratie van scroll-snap-relaties en nieuwe UI-feedbackscenario's mogelijk.
scrollSnapChange
Deze gebeurtenis wordt alleen geactiveerd als een scrollgebaar ertoe heeft geleid dat er op een nieuw snapdoel is gerust, en in de volgende volgorde
- Nadat de rol heeft gerust.
- Vóór
scrollend
.
Deze gebeurtenis wordt geactiveerd net vóór scrollend
, wanneer het scrollen voltooid is, en alleen als er op een nieuw snapdoel is gerust. Hierdoor voelt de gebeurtenis lui of just-in-time aan wanneer het scrollgebaar is voltooid.
scroller.addEventListener('scrollsnapchange', event => {
console.log(event.snapTargetBlock);
console.log(event.snapTargetInline);
})
scroller.onscrollsnapchange = event => {
console.log(event.snapTargetBlock);
console.log(event.snapTargetInline);
}
De gebeurtenis stelt het vastgeklikte item op het gebeurtenisobject beschikbaar als snapTargetBlock
en snapTargetInline
. Als de scroller alleen horizontaal is, is de eigenschap snapTargetBlock
null
. De waarde van de eigenschap is het elementknooppunt.
Unieke details voor scrollSnapChange
Er wordt pas gevuurd als de gebruiker zijn gebaar loslaat
Een vinger die zich nog op het scherm bevindt of vingers op een trackpad geven aan dat het gebaar van de gebruiker nog niet klaar is met scrollen, wat betekent dat het scrollen nog niet is beëindigd, wat betekent dat het snapdoel nog niet is gewijzigd en in afwachting is van een volledig gebruikersgebaar.
Vuurt niet als het snapdoel niet is veranderd
De gebeurtenis is bedoeld voor snelle wijzigingen, en als het snapdoel niet is gewijzigd, wordt de gebeurtenis niet geactiveerd, zelfs als er interactie is geweest met de scroller door een gebruiker. De gebruiker heeft echter wel gescrolld, dus na voltooiing van het scrollen wordt de scrollend
gebeurtenis nog steeds geactiveerd.
scrollSnapVeranderen
Deze gebeurtenis wordt geactiveerd zodra de browser heeft besloten dat het scrollgebaar een nieuw snapdoel heeft of zal opleveren. Het vuurt gretig en tijdens het scrollen.
scroller.addEventListener('scrollsnapchanging', event => {
console.log(event.snapTargetBlock);
console.log(event.snapTargetInline);
})
scroller.onscrollsnapchanging = event => {
console.log(event.snapTargetBlock);
console.log(event.snapTargetInline);
}
De gebeurtenis stelt het vastgeklikte item op het gebeurtenisobject beschikbaar als snapTargetBlock
en snapTargetInline
. Als de scroller alleen verticaal is, is de eigenschap snapTargetInline
null
. De waarde van de eigenschap is het elementknooppunt.
Unieke details voor scrollSnapChanging
Ontsteekt vroeg en vaak tijdens een scrollgebaar
In tegenstelling tot scrollSnapChange
, dat wacht op een volledig scrollgebaar van de gebruiker, wordt deze gebeurtenis gretig geactiveerd terwijl een gebruiker met zijn vinger scrolt of een trackpad gebruikt. Neem een gebruiker die langzaam scrolt zonder een vinger op te tillen. scrollSnapChanging
wordt meerdere keren geactiveerd tijdens het gebaar, zolang de gebruiker over meerdere potentiële snapdoelen beweegt. Elke keer dat de gebruiker scrolt en de browser heeft vastgesteld dat deze bij het loslaten op een nieuw snapdoel zou rusten, wordt de gebeurtenis geactiveerd om u te vertellen welk element dat is.
Vuurt niet alle snapdoelen af op weg naar een nieuw snapdoel
Overweeg bovendien een fling, waarbij een gebruiker een scroll-worpgebaar maakt dat meerdere snapdoelen tegelijk omvat; deze gebeurtenis zal één keer vuren met het doelwit waarop zal worden gerust. Het is dus gretig, maar niet verspillend, om u zo snel mogelijk van het snelle doelwit te voorzien.
Gebruiksscenario's en voorbeelden
Deze gebeurtenissen maken veel nieuwe gebruiksscenario's mogelijk, terwijl de huidige patronen ook veel eenvoudiger te implementeren zijn. Een goed voorbeeld is het inschakelen van door snap geactiveerde animatie . Het contextueel onthullen van het snap-item, de kinderen van het snap-item of bijbehorende informatie wanneer dit het snap-doel is.
De volgende patronen demonstreren enkele gebruiksscenario's waarmee u meteen productief kunt zijn.
Markeer een getuigenis
In dit voorbeeld wordt de afgebroken getuigenis gepromoot of visueel gefocust.
scroller.onscrollsnapchange = event => {
scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
event.snapTargetInline.classList.add('snapped')
}
Toon het bijschrift voor het vastgelegde item
In dit voorbeeld wordt het bijschrift voor het vastgeklikte item weergegeven. Beide gebeurtenissen zijn opgenomen in deze demo, zodat u de verschillen in timing en gebruikerservaring tussen scrollSnapChange
en scrollSnapChanging
kunt zien.
Snel wisselen
https://codepen.io/web-dot-dev/pen/wvLPPBL
Snelle verandering
https://codepen.io/web-dot-dev/pen/QWXOObw
Animeer een keer de kinderen van een afgebroken presentatiedia
Dit voorbeeld weet wanneer een nieuwe dia is geland en erop is geplaatst, wat een goed moment is om de inhoud een keer te animeren.
document.addEventListener('scrollsnapchange', event => {
event.snapTargetBlock.classList.add('seen')
})
Snappen op zowel x als y in een scroller
Scroll-snap werkt voor scrollers die horizontaal en verticaal scrollen mogelijk maken. Deze demo toont zowel scrollSnapChanging
als scrollSnapChange
-doelen terwijl u door het raster bladert. Deze demo laat zien hoe het element waarnaar de browser springt, niet altijd het element is dat u denkt dat het is.
Er wordt een raster van vierkanten in een horizontale en verticale scroller weergegeven. De gestreepte rand vertegenwoordigt het scrollSnapChanging-doel en de ononderbroken rand is het scrollSnapChange-doel. Rood staat voor snapTargetInline en blauw staat voor snapTargetBlock.
Twee gekoppelde scrollers
Deze demo heeft twee containers voor scroll-snapping, waarbij de ene een lijst met links op hoog niveau is en de andere de daadwerkelijke pagina-inhoud is. De nieuwe scrollSnapChanging
-gebeurtenis maakt het triviaal om de snapstatussen hiervan bidirectioneel te koppelen, zodat ze altijd gesynchroniseerd zijn.
OKLCH-kleurenkiezer
Deze demo heeft 3 scrollers, die elk een ander kleurkanaal in OKLCH vertegenwoordigen. Het vastgeklikte item wordt gesynchroniseerd met de relevante radiogroep en de gegevens kunnen worden opgehaald uit een formulier waarin de invoer is verwerkt. Voor een muis- of aanraakgebruiker kunt u naar de gewenste waarde scrollen. Voor toetsenbordgebruikers: u kunt met de tabtoetsen en de pijltjestoetsen gebruiken. Voor een schermlezer is het slechts een formulier.
scrollSnapChanging wordt gebruikt om het vastgelegde item gretig te synchroniseren met de status, terwijl scrollSnapChange wordt gebruikt om de betreffende kleurkanaalheader te animeren waarop de gebruikersinvoer werd toegepast.
https://codepen.io/web-dot-dev/pen/OJeOOVGVerbluffende geanimeerde hubs
Deze demo verbetert geleidelijk de scroll-snapervaring met door snap geactiveerde overgangen met behulp van scrollsnapchange
.
Controleer of er ondersteuning voor evenementen is met het volgende JavaScript:
if ('onscrollsnapchange' in window) {
// ok to use snap change
}
Scrollbare liniaalinvoer
Deze demo bevat een schuifbare liniaal als alternatieve manier om een lengte voor een getalinvoer te kiezen. Voer waarden rechtstreeks in de getalinvoer in of blader naar de grootte. De veranderingsgebeurtenis wordt gebruikt om de selectie te wissen tijdens het gebaar van de gebruiker, terwijl de veranderingsgebeurtenis wordt gebruikt om de status bij te werken en de keuze van de gebruiker te versterken.
Dek stroom af
Deze demo bouwt voort op Bramus Van Damme's uitstekende scrollgestuurde animatierecreatie van de beroemde macOS-coverflow ( ook video-tutorial ). Uniek is dat scrollSnapChanging
wordt gebruikt om de albumtitel te verbergen en scrollSnapChange
wordt gebruikt om de titel te presenteren. De gebeurtenissen helpen bij het orkestreren van een gretige verberging van de oude titel en een luie presentatie van de nieuwe.
Meer ideeën om wat creativiteit te stimuleren
Nu het triviaal is om te weten welk element op het punt staat te worden geklikt en welk element actief wordt geklikt, zijn er veel nieuwe mogelijkheden! Hier is een lijst met ideeën om creativiteit en aanvullende gebruiksscenario's te stimuleren:
- Het activeren van lazyloading, bekend als door snapchange geactiveerde weergave of het ophalen van gegevens.
- Miniaturen van filmstrips gekoppeld aan een grotere afbeelding.
- Afspelen/pauzeren voor een videotrailer voor een afgebroken videominiatuur.
- Analytics-tracking
- Scrollytelling
- Rad van Fortuin UI/UX
- Snapdoel krijgt een verankerde tooltip.
- Tik om te klikken
- Snap om te onthullen
- Klinkt op snap
- Veeg gebruikersinterface
- Veegbare tabbladen of carrousels
Verdere studies
Het Chrome-team is benieuwd naar wat u met deze nieuwe API's bouwt en hoopt dat dit uw scrollbare ervaringen helpt stroomlijnen.