Scrollend, een nieuwe JavaScript-gebeurtenis

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 gebeurtenis scrollend was er geen betrouwbare manier om te detecteren dat een scroll was voltooid. Dit betekende dat gebeurtenissen te laat werden geactiveerd of terwijl de vinger van een gebruiker nog op het scherm was. Deze onbetrouwbaarheid bij het weten wanneer het scrollen daadwerkelijk is beëindigd, leidde tot bugs en een slechte gebruikerservaring.

Voor

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

Het beste wat deze setTimeout()-strategie kan doen, is weten of het scrollen is gestopt voor 100ms. Dit lijkt meer op een gebeurtenis waarbij het scrollen is onderbroken, niet een gebeurtenis waarbij het scrollen is beëindigd.

Na de gebeurtenis scrollend voert de browser al deze moeilijke evaluaties voor je uit.

Na

document.onscrollend = event => {…}

Dat is het goede spul. Perfect getimed en vol met betekenisvolle voorwaarden voordat ze worden uitgezonden.

Browser Support

• 114
• 114
• 109
• 26.2

Source

Probeer het eens.

Evenementgegevens

De gebeurtenis scrollend wordt geactiveerd als: - De browser niet meer animeert of scrollen vertaalt. - De gebruiker heeft de aanraking losgelaten. - De aanwijzer van de gebruiker heeft de schuifregelaar losgelaten. - De gebruiker heeft de toets losgelaten. - Scrollen naar fragment is afgerond. - Scrolluitlijning is afgerond. scrollTo() is afgerond. - De gebruiker heeft de visuele viewport gescrold.

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

Het duurde zo lang voordat deze gebeurtenis naar het webplatform kwam, omdat er veel kleine details waren die moesten worden gespecificeerd. Een van de meest complexe gebieden was het verwoorden van de scrollend-gegevens voor de visuele viewport versus het document. Denk aan een webpagina waarop je inzoomt. Je kunt scrollen als je bent ingezoomd, maar je scrollt dan niet per se door het document. Zelfs deze door de gebruiker aangestuurde scrollinteractie in de visuele viewport stuurt de gebeurtenis scrollend zodra deze is afgerond.

De gebeurtenis gebruiken

Net als bij andere scrollgebeurtenissen kunt u listeners op verschillende manieren registreren.

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

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

of gebruik de gebeurtenisproperty:

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

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

Polyfills en progressive enhancement

Als u deze nieuwe gebeurtenis nu wilt gebruiken, is dit ons beste advies. Je kunt je huidige strategie voor het einde van het scrollen blijven gebruiken (als je die hebt) en aan het begin daarvan de ondersteuning checken met:

'onscrollend' in window
// true, if available

Dit meldt waar of onwaar, afhankelijk van of de browser de gebeurtenis aanbiedt. Met deze controle kun je 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 goed begin om je scrollend-evenement geleidelijk te verbeteren als het beschikbaar is. Je kunt ook een polyfill (NPM) proberen die ik heb gemaakt en die het beste doet 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 deze niet beschikbaar is, controleert het script aanwijzergebeurtenissen en scrollt het om de beste schatting te maken van de gebeurtenis die het kan beëindigen.

Toepassingen

Het is een goede gewoonte om rekenintensief werk te vermijden terwijl er wordt gescrold. Zo kan scrollen zoveel mogelijk geheugen en verwerking gebruiken om de gebruikerservaring soepel te houden. Een scrollend-gebeurtenis is het perfecte moment om de aandacht te trekken en het harde werk te doen, omdat de gebruiker niet meer scrollt.

De gebeurtenis scrollend kan worden gebruikt om verschillende acties te activeren. Een veelvoorkomende use case is het synchroniseren van bijbehorende UI-elementen met de positie waarop het scrollen is gestopt. Bijvoorbeeld: - De scrollpositie van een carrousel synchroniseren met een puntindicator. - Een galerij-item synchroniseren met de bijbehorende metadata. - Gegevens ophalen nadat een gebruiker naar een nieuw tabblad is gescrold.

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

Je kunt deze gebeurtenis ook gebruiken voor synchronisatie na programmatisch of gebruikersscrollen, of acties zoals analytische gegevens registreren.

Hier is een goed voorbeeld waarbij meerdere elementen, zoals pijlen, stippen en focus, moeten worden geüpdatet op basis van de scrollpositie. Bekijk hoe ik deze carrousel heb gemaakt op YouTube. Probeer ook de live demo.

Met dank aan Mehdi Kazemi voor het technische werk hieraan en Robert Flack voor de API- en implementatierichtlijnen.