Détection lorsque le doigt est retiré du pavé tactile mais que le défilement se produit toujours en raison du "toucher prédictif" - JS

Question

J'ai une fonction qui gère les défilements à chaque période de temps. Cette fonction fonctionne lorsque les utilisateurs font défiler la page avec la molette de la souris :

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

Cependant, lorsque je fais défiler des pages à l'aide du pavé tactile de mon ordinateur portable, le défilement se produit toujours même lorsque je retire mon doigt (surtout lorsque j'accélère suffisamment mon doigt et que je fais défiler, puis que je retire immédiatement mon doigt du pavé tactile). Par conséquent, le défilement se produit toujours après que l'option 750ms même lorsque les utilisateurs ne défilent pas techniquement. Cette question a été posée aquí . La question n'a pas reçu de réponse pour gérer ce comportement.

Je veux gérer les défilements uniquement après qu'une période de temps se soit écoulée depuis le dernier défilement. Les défilements que je veux gérer ne doivent pas être dus à un défilement causé par ce défilement "touche prédictive". Existe-t-il un moyen d'y parvenir à l'heure actuelle ?

Answer 1

La seule façon de gérer cela qui me vient à l'esprit est de regarder scrollY pendant un certain temps (par sondage, peut-être toutes les 50 ms environ) après avoir vu le début d'un défilement, attendez qu'il se stabilise (X millisecondes dans la même position, quelle que soit la valeur de X que vous choisissez), puis considérez que le défilement est "terminé" et lancez votre minuterie de 750 ms. L'interrogation constante serait mauvaise, mais le faire pendant une brève période alors que le défilement est toujours actif semble acceptable.

Esquisse grossière (pourrait probablement utiliser un temps d'arrêt global, par exemple) :

// VERY ROUGHLY
let shouldHandle = true
let lastScrollY = null
let lastScrollTimer = 0
window.addEventListener('wheel', e => {
    if (shouldHandle) {
        handleScroll(e) // I will handle scrolls here
        shouldHandle = false
        waitForScrollEnd(() => {
            setTimeout(() => {
                shouldHandle = true
            }, 750) // Or perhaps 700 on the basis that up to 50 was spent in `waitForScrollToEnd`
        })
    }
})
function waitForScrollEnd(cb) {
    clearTimeout(lastScrollTimer)
    lastScrollY = window.scrollY
    lastScrollTimer = setTimeout(poll, 50)

    function poll() {
        if (lastScrollY === window.scrollY) {
            lastScrollY = null
            lastScrollTimer = 0 // This is entirely optional but makes it parallel with the `else` below
            cb()
        } else {
            lastScrollY = window.scrollY
            lastScrollTimer = setTimeout(poll, 50)
        }
    }
}