Scrollend, een nieuw JavaScript-evenement

Verwijder je time-outfuncties en schud de bugs van je af. Dit is de gebeurtenis die je echt nodig hebt: scrollend.

Adam Argyle

Vóór de scrollend -gebeurtenis was er geen betrouwbare manier om te detecteren dat een scroll voltooid was. Dit betekende dat gebeurtenissen te laat zouden worden geactiveerd of terwijl de vinger van een gebruiker nog op het scherm lag. Deze onbetrouwbaarheid bij het weten wanneer het scrollen daadwerkelijk is beëindigd, leidde tot bugs en een slechte ervaring voor de gebruiker.

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

Het beste wat deze setTimeout() strategie kan doen, is weten of het scrollen gedurende 100ms is gestopt. Hierdoor lijkt het meer alsof een scroll een gebeurtenis heeft gepauzeerd, en niet alsof een scroll een gebeurtenis heeft beëindigd.

Na de scrollend -gebeurtenis doet de browser al deze moeilijke evaluaties voor u.

document.onscrollend = event => {…}

Dat is het goede. Perfect getimed en boordevol betekenisvolle omstandigheden voordat ze worden uitgezonden.

Probeer het!

Evenementdetails

De scrollend gebeurtenis wordt geactiveerd wanneer: - De browser scroll niet langer animeert of vertaalt. - De aanraking van de gebruiker is vrijgegeven. - De aanwijzer van de gebruiker heeft de schuifduim losgelaten. - De toetsaanslag van de gebruiker is vrijgegeven. - Scrollen naar fragment is voltooid. - Scroll-snap is voltooid. - scrollTo() is voltooid. - De gebruiker heeft door de visuele viewport gescrolld.

De scrollend -gebeurtenis wordt niet geactiveerd wanneer: - Het gebaar van een gebruiker niet heeft geleid tot wijzigingen in de scrollpositie (er heeft geen vertaling plaatsgevonden). - scrollTo() resulteerde niet in een vertaling.

Een reden waarom het zo lang duurde voordat dit evenement op het webplatform verscheen, was vanwege de vele kleine details waarvoor specificatiedetails nodig waren. Een van de meest complexe gebieden was het articuleren van de scrollend -details voor de Visual Viewport versus het document. Denk aan een webpagina waarop u inzoomt. U kunt in deze ingezoomde toestand rondscrollen, maar dit betekent niet noodzakelijkerwijs dat u door het document bladert. U kunt er zeker van zijn dat zelfs deze door de gebruiker aangestuurde visuele scroll-interactie de scrollend gebeurtenis zal uitzenden zodra deze is voltooid.

Het evenement gebruiken

Net als bij andere scrollgebeurtenissen kunt u luisteraars op een aantal manieren registreren.

addEventListener("scrollend", (event) => {
  // scroll ended
});

aScrollingElement.addEventListener("scrollend", (event) => {
  // scroll ended
});

of gebruik de gebeurteniseigenschap:

document.onscrollend = (event) => {
  // scroll ended
};

aScrollingElement.onscrollend = (event) => {
  // scroll ended
};

Polyfills en progressieve verbetering

Als u dit nieuwe evenement nu wilt gebruiken, vindt u hier ons beste advies. U kunt uw huidige scroll-end-strategie blijven gebruiken (als u die heeft) en aan het begin de ondersteuning controleren met:

'onscrollend' in window
// true, if available

Dat rapporteert waar of onwaar, afhankelijk van of de browser de gebeurtenis aanbiedt. Met deze controle kunt u de code vertakken:

if ('onscrollend' in window) {
  document.onscrollend = callback
}
else {
  document.onscroll = event => {
    clearTimeout(window.scrollEndTimer)
    window.scrollEndTimer = setTimeout(callback, 100)
  }
}

Dat is een gezonde start om uw scrollend evenement geleidelijk te verbeteren wanneer deze beschikbaar is. Je kunt ook een polyfill ( NPM ) proberen die ik heb gemaakt en die het beste werkt wat de browser kan:

import {scrollend} from "scrollyfills"

// then use scrollend as if it's existed this whole time
document.onscrollend = callback

De polyfill wordt geleidelijk verbeterd om de ingebouwde scrollend -gebeurtenis van de browser te gebruiken, indien beschikbaar. Als het niet beschikbaar is, kijkt het script naar pointer-gebeurtenissen en scrollt het om de beste schatting te maken van de gebeurtenis die het beëindigt.

Gebruiksgevallen

Het is een goede gewoonte om rekenwerk te vermijden terwijl u aan het scrollen bent. Deze praktijk zorgt ervoor dat scrollen gratis is om zoveel mogelijk geheugen en verwerking te gebruiken om de ervaring soepel te houden. Het gebruik van een scrollend -gebeurtenis biedt het perfecte moment om te bellen en het harde werk te doen, omdat scrollen niet langer gebeurt.

De scrollend gebeurtenis kan worden gebruikt om verschillende acties te activeren. Een veelvoorkomend gebruiksscenario is het synchroniseren van bijbehorende UI-elementen met de positie waar het scrollen stopte. Bijvoorbeeld: - Synchroniseren van een carrousel-scrollpositie met een puntindicator. - Synchroniseren van een galerijitem met zijn metadata. - Gegevens ophalen nadat een gebruiker naar een nieuw tabblad scrolt.

Stel je een scenario voor waarin een gebruiker een e-mail wegveegt. Nadat ze klaar zijn met vegen, kun je de actie uitvoeren op basis van waar ze naartoe hebben gescrolld.

U kunt deze gebeurtenis ook gebruiken voor synchronisatie na programmatisch of gebruikersscrollen, of acties zoals loganalyses.

Hier is een goed voorbeeld waarbij meerdere elementen, zoals pijlen, punten en focus, moeten worden bijgewerkt op basis van de schuifpositie. Bekijk op YouTube hoe ik deze carrousel heb gebouwd . Probeer ook de live demo .

Met dank aan Mehdi Kazemi voor hun technische werk hieraan en Robert Flack voor API- en implementatiebegeleiding.