Javascript 检测页面上的滚动方向-更新prev值

我正在使用React，我需要得到一个滚动方向，以便做一些事情。我有一个工作代码，但我不知道如何存储和更新以前的滚动位置

这是我的密码：

componentDidMount(){
    const prev = window.scrollY;
    window.addEventListener('scroll', e => this.handleNavigation(e, prev);
}

这里可见的问题是componentDidMount只触发一次，所以当我尝试执行以下操作时：

handleNavigation = (e, prev) =>{
    const window = e.currentTarget;

    if(prev > window.scrollY){
        console.log("scrolling up");
    }
    else if(prev < window.scrollY){
        console.log("scrolling down");
    }
};

它正确地比较了值，但prev从未更改，因此它无法按预期工作。我如何让它工作

---

我是否将prev放在区间内以更新值或类似的疯狂行为

试试下面的方法。它应该可以工作，因为这样以前的值存储在组件的实例中

componentDidMount() {
    this.prev = window.scrollY;
    window.addEventListener('scroll', e => this.handleNavigation(e));
}

handleNavigation = (e) => {
    const window = e.currentTarget;

    if (this.prev > window.scrollY) {
        console.log("scrolling up");
    } else if (this.prev < window.scrollY) {
        console.log("scrolling down");
    }
    this.prev = window.scrollY;
};

---

尝试以下方法。它应该可以工作，因为这样以前的值存储在组件的实例中

componentDidMount() {
    this.prev = window.scrollY;
    window.addEventListener('scroll', e => this.handleNavigation(e));
}

handleNavigation = (e) => {
    const window = e.currentTarget;

    if (this.prev > window.scrollY) {
        console.log("scrolling up");
    } else if (this.prev < window.scrollY) {
        console.log("scrolling down");
    }
    this.prev = window.scrollY;
};

---

是的，这很有效，而且是显而易见的解决办法。谢谢你解开了我的大脑。对于那些想在react钩子中找到更精确实现的人来说，可以在这里找到。你可以在这里找到一个不需要任何状态管理的答案：是的，这是有效的、显而易见的解决方案。感谢您解开我的大脑。对于那些希望在react hooks中获得更精确实现的人，可以在这里找到。您可以在这里找到答案，而无需任何状态管理：