Scrollend, een nieuw JavaScript-evenement

Verwijder je timeout-functies en laat de bijbehorende bugs achter je; 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 het scrollen was voltooid. Dit betekende dat gebeurtenissen te laat werden geactiveerd, of terwijl de vinger van de gebruiker nog op het scherm rustte. Deze onbetrouwbaarheid in het vaststellen wanneer het scrollen daadwerkelijk was voltooid, 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 vaststellen of het scrollen 100ms lang is gestopt. Dit maakt het meer een gebeurtenis die aangeeft dat het scrollen is gepauzeerd, dan een gebeurtenis die aangeeft dat het scrollen is beëindigd.

Na de ` scrollend -gebeurtenis voert de browser al deze lastige evaluaties voor je uit.

Na

document.onscrollend = event => {…}

Dat is waar het om draait. Perfect getimed en boordevol betekenisvolle voorwaarden voorafgaand aan de uitstoot.

Browser Support

• 114
• 114
• 109
• 

Source

Probeer het eens!

Evenementdetails

De scrollend -gebeurtenis wordt geactiveerd wanneer: - De browser niet langer scrollt of de scrollbeweging uitvoert. - De gebruiker het scherm loslaat. - De gebruiker de scrollknop loslaat. - De gebruiker een toets loslaat. - Het scrollen naar het fragment is voltooid. - Het scrollen naar het fragment is voltooid. - scrollTo() -functie is voltooid. - De gebruiker het zichtbare venster heeft gescrollt.

De scrollend gebeurtenis wordt niet geactiveerd wanneer: - Een gebaar van de gebruiker geen wijzigingen in de scrollpositie heeft veroorzaakt (er heeft geen verplaatsing plaatsgevonden). - scrollTo() geen verplaatsing heeft veroorzaakt.

Een van de redenen waarom het zo lang duurde voordat deze functie beschikbaar kwam op het webplatform, was de grote hoeveelheid kleine details die gespecificeerd moesten worden. Een van de meest complexe aspecten was het definiëren van de scrollend details voor de visuele viewport versus het document. Neem bijvoorbeeld een webpagina waarop u inzoomt. U kunt scrollen terwijl u in deze ingezoomde staat bent, en dat betekent niet per se dat het hele document wordt gescrollt. Wees gerust, zelfs deze door de gebruiker aangestuurde scrollinteractie in de visuele viewport zal de scrollend -gebeurtenis activeren zodra deze is voltooid.

Het evenement gebruiken

Net als bij andere scroll-events kun je op verschillende manieren luisteraars registreren.

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

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

Of gebruik de eigenschap 'event':

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

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

Polyfills en progressieve verbetering

Als je dit nieuwe evenement 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 ervan de ondersteuning raadplegen met:

'onscrollend' in window
// true, if available

Dat geeft 'waar' of 'onwaar' terug, afhankelijk van of de browser de gebeurtenis ondersteunt. 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 -gebeurtenis geleidelijk te verbeteren wanneer deze 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 zal geleidelijk worden verbeterd om, indien beschikbaar, gebruik te maken van de ingebouwde ` scrollend gebeurtenis van de browser. Als deze niet beschikbaar is, observeert het script muisaanwijzergebeurtenissen en scrollt het om de best mogelijke inschatting te maken van het einde van de gebeurtenis.

Gebruiksvoorbeelden

Het is een goede gewoonte om rekenintensieve taken te vermijden tijdens het scrollen. Zo blijft het scrollproces vrij om zoveel mogelijk geheugen en processorkracht te gebruiken voor een soepele gebruikerservaring. Het gebruik van een scrollend event biedt het perfecte moment om de zware taken uit te voeren, omdat er dan niet meer gescrold wordt.

De scrollend gebeurtenis kan worden gebruikt om verschillende acties te activeren. Een veelvoorkomend gebruik is het synchroniseren van bijbehorende UI-elementen met de positie waar het scrollen is gestopt. Bijvoorbeeld: - Het synchroniseren van de scrollpositie van een carrousel met een stipindicator. - Het synchroniseren van een galerijitem met de bijbehorende metadata. - Het ophalen van gegevens nadat een gebruiker naar een nieuw tabblad scrollt.

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

Je kunt deze gebeurtenis ook gebruiken voor synchronisatie na programmatisch scrollen of scrollen door de gebruiker, of na acties zoals het vastleggen van analysegegevens.

Hier is een goed voorbeeld waarbij meerdere elementen, zoals pijlen, stippen en focus, moeten worden bijgewerkt 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 zijn technische bijdrage en aan Robert Flack voor de begeleiding bij de API en de implementatie.