Question

我正在尝试将整页滚动添加到我正在处理的网站上（使用React，遗憾的是无法获取fullpage.js，也没有反应全页或任何其他lib工作与我的项目）。

基本上我要做的是禁用“正常”滚动（我在所有滚动键上使用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如何知道滚动何时完成。

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

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

1 个答案: