检测页面上的滚动方向-更新上一个值

Question

我正在使用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放在时间间隔内以更新值或类似的东西？

Answer 1

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

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;
};