HTML-tools

Gratis scrollend Event Snippet Generator

Genereer scrollend event handlers die vuren na volledig scrollen met momentum/inertie, met debounce vergelijking.

Tool laden...

Wat is scrollend Event Snippet Generator?

Het scrollend-event is een browser-native event dat wordt geactiveerd wanneer scrollen volledig is voltooid — inclusief momentum-scrollen, rubber-banding en inertie-uitdoving. Het vuurt precies een keer wanneer de scroll-beweging van de gebruiker echt is voltooid, zowel voor programmatisch als door de gebruiker geinitieerd scrollen. Baseline 2025, ondersteund in Chrome 114+, Edge 114+, Safari 17.5+ en Firefox 131+.

Snel antwoord

Het scrollend-event vuurt wanneer scrollen volledig is voltooid inclusief momentum en inertie. In tegenstelling tot gedebouncte scroll-handlers die het einde raden, is scrollend een browser-native signaal dat precies een keer vuurt op de ware eindpositie. Baseline 2025 (Chrome 114+, Safari 17.5+, Firefox 131+).

Last updated: 2026-06-02

Beperkingen

  • scrollend vuurt alleen op elementen met daadwerkelijke scrollbare overflow.
  • scrollend vuurt niet tijdens continu scrollen — het signaleert alleen voltooiing.
  • scrollend kan mogelijk niet vuren voor onderbroken programmatisch scrollen.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Selecteer het snippet-type: basis scrollend-listener, scrollend met positielogging, of een vergelijking met gedebounct scroll.
  2. Configureer het scrolldoelwit: window of een specifiek element met overflow:scroll.
  3. Pas de handler-actie aan: log de eindpositie, werk een UI-element bij of laad meer content.
  4. Kopieer het JavaScript-snippet. Het vergelijkingssnippet toont beide benaderingen met tijdslabels.

Waarvoor je het kunt gebruiken

  • Activeer infinite scroll-contentladen alleen wanneer de gebruiker echt is gestopt met scrollen.
  • Werk een sticky inhoudsopgave of voortgangsindicator bij op de exacte uiteindelijke scrollpositie.
  • Activeer analytics-gebeurtenissen bij het voltooien van scrollen voor nauwkeurige meting.

Gebruik

Praktische voorbeelden

Voorbeeld

Infinite scroll met nauwkeurige laadtriggering

Een social media-feed gebruikt scrollend om te detecteren wanneer de gebruiker stopt met scrollen. scrollend vuurt een keer wanneer de positie stabiliseert, wat dubbele API-aanroepen en phantom laadstatussen voorkomt.

Voorbeeld

Debounce-vergelijking voor scroll-bewuste navigatie

Een documentatiesite markeert de huidige sectie. Met scrollend wordt de markering exact bijgewerkt wanneer scrollen stopt. Met een gedebouncte handler kan de markering flikkeren tijdens mid-scroll.

Veelgemaakte fouten

  • Aannemen dat scrollend op elk scrollbaar element vuurt — het vuurt alleen op elementen met daadwerkelijke scrollbare overflow.
  • Scrollend gebruiken waar continue scroll-feedback nodig is — voor voortgangsbalken en parallax-effecten is het reguliere scroll-event met requestAnimationFrame nodig.
  • Vertrouwen op scrollend voor elke scroll-voltooiing — programmatisch scrollen kan worden onderbroken door een andere scroll-aanroep.

Verificatie

  1. Maak een scrollbare div, voeg een scrollend-listener toe en controleer of deze een keer vuurt op de uiteindelijke rustpositie.
  2. Vergelijk scrollend met een gedebouncte handler (200ms) — scrollend vuurt op het ware einde, de gedebouncte handler kan meerdere keren vuren.

FAQ

Vragen over scrollend Event Snippet Generator

Hoe verschilt scrollend van een gedebouncte scroll-eventlistener?

Een gedebouncte listener raadt het einde van scrollen met een timeout. scrollend vuurt op basis van de werkelijke fysica van de scroll-beweging en heeft nooit ongelijk over de eindpositie.

Werkt scrollend met aanraakscrollen en trackpad-momentum?

Ja. scrollend houdt rekening met alle scroll-invoertypen, inclusief momentum en inertie van aanraak- en trackpad-bewegingen.

Wat gebeurt er als de gebruiker opnieuw begint te scrollen voordat scrollend vuurt?

Het lopende scrollend wordt geannuleerd en een nieuwe wordt gepland voor de nieuwe beweging — scrollend vuurt alleen als scrollen echt is gestopt.

Gerelateerde tools

Meer html-tools

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool

Probeer ook

Probeer ook