Using easy-scroll on window with Chrome has erratic scrolling

Hi,

with the current version of Chrome (v98.x and maybe also the previous version) on MacOS and Windows 10 (also on Edge) scrolling on the window DOM element has a strange scrolling behavior, first very slow (for around half of the duration) and then fast for the rest of the duration/animation (independent of the "easyPreset" setting).

The effect doesn't happen on Safari or Firefox.

The DOM looks like

<html>
    <body>
        <main> <!-- this holds all the big content -->
            <section id="section-1"></section>
            <section id="section-2"></section>
            <section id="section-3"></section>
            <!-- ... more sections -->
        </main>
    </body>
</html>

with the CSS like

body {
    overflow-x: hidden;
    overflow-y: auto;
}

main {
    display: flex;
    width: 100vw;
    justify-content: flex-start;
}

section {
    position: relative;
    min-height: 100vh; /* this is needed because the content might be bigger then viewport height */
}

A sample JS code:

let isAutoScrolling = false;

function scrollToSection2() {
    const sectionToScrollTo = document.querySelector('#section-2');
    scrollToElement(sectoinToScrollTo);
}

function scrollToElement(sectionToScrollTo) {
    isAutoScrolling = true;

    easyScroll({
        scrollableDomEle: window,
        direction: 'bottom',
        duration: 300,
        easingPreset: 'linear',
        scrollAmount: Math.abs(sectionToScrollTo.getBoundingClientRect().top),
        onRefUpdateCallback: (scronnAnimId) => {
            // the ID differs from call to call, that is right, isn't it?
        },
        onAnimationCompleteCallback: () => {
            console.log('animation complete');
            isAutoScrolling = false;
        }
    });
}

window.addEventListener('scroll', () => {
    console.log('onScroll', isAutoScrolling);
});

The console output differs a bit depending on the Browser.

On Chrome/FF it shows that the onScoll event is still triggered multiple times after the animation was stated to be complete (i.e. the callback has been called).

On Safari the onScroll event is triggered only once.

But the behavior is on Chrome that the "linear" animation is not linear

> scrollToSection2();
onScroll true
onScroll true
onScroll true
onScroll true
[...]
animation complete
onScroll false
onScroll false
onScroll false
onScroll false

Any idea what might be the problem? I'm not sure if this is the source of the problem having different behavior on the various Browers.

In the end I want "snap"/scroll to a section when the mouse scrolling has been finished. Maybe any idea how to implement it correctly using this vanilla js lib (or any alternative)?

Kind regards, Dennis

tarun-dugar / easy-scroll

Using easy-scroll on window with Chrome has erratic scrolling #22