onWheel 事件 - 如何在用户停止滚动后立即触发方法

Question

我正在尝试将 整页滚动 添加到我正在处理的网站中（使用 React，遗憾的是无法获取 fullpage.js、react-fullpage 或任何其他库）与我的项目）。

基本上我想要做的是禁用“正常”滚动（我在所有滚动键上使用 preventDefault() ）并自行处理滚动。

这是一个示例代码：

window.addEventListener("wheel", e => {
        const delta=e.detail? e.detail*(-120) : e.wheelDelta;
        // console.log(delta);

        let direction;
        if ( delta !== null ) {
            direction = delta > 0 ? 'up' : 'down';
        }
        //console.log(direction);

        if(direction === "down"){
            document.querySelector('.who').scrollIntoView({ alignToTop: true, behavior: 'smooth'});
        }
        else if (direction === "up"){
            document.querySelector('.why').scrollIntoView({ alignToTop: true, behavior: 'smooth'});
        }
    });

此代码有效，但是只有在用户停止滚动后才会触发 scrollIntoView（它是新功能并且需要 polyfill，ik）方法。

我记录了我的屏幕以更好地解释问题： https://gifyu.com/image/x6Yx（请耐心等待，2-3 秒后开始出现问题）

正如您在此处看到的，控制台在我向下滚动后立即开始记录增量和方向，但是 .scrollIntoView 仅在 鼠标滚轮停止移动后触发 - 那是网站开始滚动的时候。

这意味着如果我一直向下移动鼠标滚轮 scrollIntoView() 将永远不会运行。

我希望在用户向上或向下移动滚轮后立即进行滚动。有谁知道如何做到这一点？

Answer 1

似乎连续触发.scrollIntoView() 并设置behaviour: 'smooth' 参数正在取消动画，因为此函数仅被调用一次。

在您的代码中，您试图平滑滚动到该方向，但通过连续触发滚轮事件并因此不断调用.scrollIntoView() 函数，动画被取消，直到动画可以播放而不会被中断。

这也是你停止滚动后出现动画的原因。

解决这个问题的方法是阻止对.scrollIntoView() 的任何其他调用，只要滚动动画正在进行。我发现this question 知道如何知道滚动何时完成。

为什么您尝试添加整页滚动反应库失败了？