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

IT技术 javascript reactjs scroll ecmascript-6
2021-04-25 11:12:17

我正在使用 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 放在间隔内以更新值或类似的疯狂内容?

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