javascript - 检测页面上的滚动方向 - 更新先前的值

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