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

Question

我正在尝试将 整页滚动 添加到我正在使用的网站（使用 React，遗憾的是无法获得 fullpage.js 也无法做出反应- fullpage 或任何其他库来处理我的项目）。

基本上我想做的是禁用 "normal" 滚动（我在所有滚动键上使用 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，我知道）方法仅在用户停止滚动后才会触发。

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

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

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

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

Answer 1

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

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

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

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

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

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

onWheel event - how to fire method instantly and not after user stops scrolling

javascript

scroll

mousewheel

reactjs