檢測滾動到 div 頂部並溢出：在 ReactJs 中滾動

Question

我正在創建一個消息傳遞功能。 對話只占用 100vh 高度減去 header - 所以，我必須將其溢出設置為滾動。 如何檢測用戶是否滾動到對話的最頂部？ 一旦用戶滾動到頂部，我將獲取較舊的消息。

我做了一些研究，但沒有一個有效。 我認為它們僅適用於可滾動頁面。

下面的代碼片段與我在 web 上看到的相似。 但是，滾動永遠不會被觸發。

const top_ref = React.useRef < HTMLDivElement > null;

const trackScrolling = () => {
  console.log("scrolling");
};

React.useEffect(() => {
  document.addEventListener("scroll", trackScrolling);

  return () => {
    document.removeEventListener("scroll", trackScrolling);
  };
});

Answer 1

正如cloned所指出的，Intersection Observer 完成了這項工作。