Is there a way to calculate how long it will take for a smooth scroll to end

Question

I want my animation to run after the screen has stopped scrolling in Javascript, otherwise the user won't be able to see it. Unfortunately, the speed of scrolling in chrome can vary a lot, and I don't know how to calculate the speed.

Answer 1

Instead of calculating the scroll duration, why not just start the animation once you detect the page is in the right scroll location? You can use window.scrollY to get the current vertical scroll of the page, and element.offsetTop to get the top position of the element.

You can make a function to check if the element is visible on the page with something like the following code.

function elementInScrolledView(element) {
    const pageTop = window.scrollY;
    const pageBottom = pageTop + window.innerHeight;

    const elementTop = element.offsetTop;
    const elementBottom = elementTop + element.offsetHeight;

    return ((elementBottom <= pageBottom) && (elementTop >= pageTop));
}

This code might need some edits if the element is taller than the window; you could compare just the tops of the elements?

You could start an interval checking each frame once the scrolling started until the function returned true, at which point you could clear the interval and start the animation.