Read more

JavaScript: Detecting the end of native smooth scrolling

Henning Koch
May 09, 2023Software engineer at makandra GmbH

When you use native smooth scrolling Show archive.org snapshot there is no built-in method to detect the end of the scrolling animation. Methods like scrollTo() Show archive.org snapshot don't return a promise. We will eventually get a scrollend Show archive.org snapshot event, but that is still some time away Show archive.org snapshot .

Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show archive.org snapshot

Until then I'm using the following awaitScrollEnd() function as a workaround. It returns a promise that resolves when the given Document or Element does not receive a scroll event for 75 milliseconds:

import debounce from 'lodash-es/debounce'

function awaitScrollEnd(viewport, delay = 75) {
  return new Promise((resolve) => {
    function done() {
      viewport.removeEventListener('scroll', debouncedDone)
      resolve()
    }

    // We consider scrolling to have stopped after we haven't received
    // a `scroll` event for `delay` milliseconds.
    //
    // The default delay (75) assumes a minimum framerate of ~13 FPS
    // while scrolling.
    let debouncedDone = debounce(done, delay)
    viewport.addEventListener('scroll', debouncedDone, { passive: true })
    debouncedDone()
  })
}

Use it after you started a native scrolling motion:

element.scrollIntoView({ behavior: 'smooth' })
await awaitScrollEnd(document)

Note that import 'lodash-es/debounce' only imports the debounce function (and possibly few dependencies) into your JavaScript bundle, not the entire Lodash library.
While you could implement debouncing yourself (using timeouts), Lodash already comes with tests. There is no real reason to implement it yourself.

Posted by Henning Koch to makandra dev (2023-05-09 16:26)