Scroll naar Snapgebeurtenissen

Adam Argyle

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).

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

1. Nadat de rol heeft gerust.
2. 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.

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.

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.

Verbluffende 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.

Bronnen:

• CSS-specificatie
• Scroll Snap-uitleggers
• CodePen-collectie