时间戳

首页 > 解决方案 > onWheel 事件 - 如何在用户停止滚动后立即触发方法

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

问题描述

我正在尝试将整页滚动添加到我正在处理的网站中（使用 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() 将永远不会运行。

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

标签： javascriptreactjsscrollmousewheel

解决方案

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

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

这也是你停止滚动后动画发生的原因。

.scrollIntoView()解决此问题的方法是在滚动动画正在进行时阻止任何其他调用。我发现了这个关于如何知道滚动何时完成的问题。

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

推荐阅读