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

Posted 2023-03-14

【中文标题】检测页面上的滚动方向 - 更新上一个值

【英文标题】：Detecting scrolling direction on the page - updating prev value

【发布时间】：2018-05-18 13:19:24

【问题描述】：

我正在使用 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;
;

【讨论】：

是的，这是有效且明显的解决方案。感谢您解开我的大脑。

对于那些正在寻找更精确的 react hooks 实现的人，可以在这个post 中找到它。

你可以在这里找到没有任何状态管理的答案：***.com/a/65534697/7207514