javascript - 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关于如何知道滚动何时完成。

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