reactjs - 在 REACT 中检测鼠标滚轮事件

Question

我使用以下代码检测鼠标滚轮方向：

const onWheelHandler = e => {
        const dir = e.deltaY;
        if (dir < 0) {
            // up
        } else if (dir > 0) {
            // down
        }
    }

使用 div：

<div onWheel={e => onWheelHandler(e)}>
    // content
</div

无论车轮移动多长时间，我都希望它每次移动只运行一次。

现在这个函数执行每一个轮子的移动，这意味着如果我长时间移动轮子但在同一个动作中它只是继续执行函数，这就是一个问题。

帮助 ？

标签： reactjs

Answer 1

添加一个状态以保存最后一次运动。

const [lastMouvement, setLastmouvement] = useState(null);
const onWheelHandler = e => {
    const dir = e.deltaY;
    if(lastMouvement === dir){
        return;
    }
    setLastmouvement(dir);
    
    if (dir < 0) {
        // up
    } else if (dir > 0) {
        // down
    }
}