使用 React 鈎子在滾動上記錄滾動 position

Question

所以我一直試圖讓我的事件偵聽器讓組件在滾動時工作和更新。 我找到了這篇文章： 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]);

該代碼不會向控制台記錄任何內容，每當我嘗試使用滾動 position 時，該值始終為 0。我做錯了什么嗎？ 任何幫助將不勝感激！

Answer 1

您將依賴關系賦予 useEffect。 useEffect 只會在scrollPosition更改后執行。

而且它永遠不會在你的代碼中改變，因為 useEffect 沒有被執行。 它是相互依賴的。

嘗試刪除scrollPosition依賴項中的 scrollPosition。

Answer 2

我認為這是因為您的scrollPosition state 的初始值。 嘗試使用null這樣做：

const [scrollPosition, setScrollPosition] = useState(null); // it is what to change
const handleScroll = () => {
    const position = window.scrollY;
    console.log(position);
    setScrollPosition(position);
};

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

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

Answer 3

所以我終於明白為什么代碼不起作用了。 我想要滾動的頁面被包裹在一個 div 中。 div 占據了整個頁面並且有多個部分。 我認為 div 只是在擴展頁面，並且window仍在滾動。 事實證明，我實際上是在 div 中滾動，而不是 window。 所以以下是最終的工作：

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

我不確定這是否是最優化的還是什么，但至少它給了我想要的卷軸 position。 謝謝所有回答的人！

Answer 4

對於應該改變的值，使用const完全沒有意義。 使用var或let應該可以工作，

The value of a constant can't be changed through reassignment在這里閱讀更多關於 const https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const