Question

I have a function that handles scrolls every period of time. This function works when users scroll with mouse wheel:

let shouldHandle = true
window.addEventListener('wheel', e => {
    if (shouldHandle) {
        handleScroll(e) // I will handle scrolls here
        shouldHandle = false
        setTimeout(() => {
            shouldHandle = true
        }, 750)
    }
})

However, when I am scrolling using my laptop's touchpad, scroll still happens even when I remove my finger (especially when I accelerate my finger enough and scroll, then immediately remove my finger from the touchpad). As a result, scroll still happens after the 750ms even when the users are not technically scrolling. This question has been asked here. The question did not receive an answer to handle this behavior.

I want to handle scroll only after a period of time has elapsed from the last scroll. The scrolls I want to handle must not be because of scrolling caused by this "predictive touch" scroll. Is there a way to achieve this as of now?

The programming language is Javascript

Answer 1

Note: used code provided in the question directly.

The only way that comes to mind is to watch scrollY for a period after you've seen a scroll start and wait for it to stabilize and only then consider that scroll "completed" and start your 750ms timer. Constantly polling would be time taking and inefficient, but doing it for a short period while the scrolling is still actively occurring seems acceptable.

//Rough Code

    let shouldHandle = true
    let lastScollY = null
    let lastScrollTimer = 0
    window.addEventListener('wheel', e => {
        if (shouldHandle) {
            handleScroll(e) // It will handle scrolls here
            shouldHandle = false
            waitForScrollToEnd(() => {
               setTimeout(() => {
                  shouldHandle = true
               }, 750) // or perhaps 700 on the basis that upto 50 was spent in  'waitForScrollToEnd'
           })
        }
    })


    function waitForScrollToEnd(cb) {
        clearTimeout(lastScrollTimer)
        lastScrollY = window.ScrollY
        lastScrollTimer = setTimeout(poll, 50)
        function poll() {
            if (lastScrollY == window.scrollY) {
                lastScrollY = null
                lastScrollTimer = 0
                cb()
            }
            else {
                lastScrollY = null
                lastScrollTimer = setTimeout(poll, 50)
            }
        }
    }