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

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

1 个答案: