使用 React 钩子在滚动时记录滚动位置答案

【问题标题】：Logging scroll position on scroll using React hooks使用 React 钩子在滚动时记录滚动位置
【发布时间】：2022-01-07 11:22:37
【问题描述】：

所以我一直试图让我的事件侦听器让组件工作并在滚动时更新。我找到了这篇文章：Get scroll position with Reactjs，我尝试了第二个答案（因为我主要使用钩子，我希望我的代码保持一致。）所以我的组件中有这段代码：

const [scrollPosition, setScrollPosition] = useState(0);
const handleScroll = () => {
    const position = window.scrollY;
    console.log(position);
    setScrollPosition(position);
};

useEffect(() => {
    window.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
        window.removeEventListener('scroll', handleScroll);
    };
}, [scrollPosition]);

代码没有向控制台记录任何内容，每当我尝试使用滚动位置时，该值始终为 0。我做错了什么吗？任何帮助将不胜感激！

【问题讨论】：

scrollPosition 没有在 effect 回调中引用，因此它不是依赖项，应该被删除。删除后，代码似乎可以按您的预期运行。这是一个正在运行的codesandbox。确保您的“窗口”有足够的内容可以真正滚动。
好的，那么这可能是我代码中其他地方的错误。感谢您提供该信息以确认它在最基本的设置中确实有效。这非常有帮助。一旦我能更具体地找到导致问题的原因，我会更新它

标签： javascript reactjs react-hooks use-effect

【解决方案1】：

您将依赖项赋予 useEffect。 useEffect 只会在 scrollPosition 更改后执行。

而且它永远不会在你的代码中改变，因为 useEffect 没有被执行。它是相互依赖的。

尝试删除 useEffect 依赖项中的 scrollPosition。

【讨论】：

感谢您的回答！我已经删除了依赖项。所以我在 useEffect 中只有一个空数组，我仍然没有得到任何日志，变量也没有变化。我也试过没有任何数组，它仍然没有改变。

【解决方案2】：

所以我终于明白为什么代码不起作用了。我想要滚动的页面被包裹在一个 div 中。 div 占据了整个页面并且有多个部分。我认为 div 只是在扩展页面，而 window 仍在滚动。事实证明，我实际上是在 div 而不是窗口内滚动。所以以下是最终的工作：

const scrollEvent = (e) => { 
    console.log(e.target.scrollTop)
  }
...
<div onScroll={scrollEvent}>
   ...
</div>

我不确定这是否是最优化的，但至少它给了我想要的滚动位置。谢谢大家回答！

【讨论】：