检测滚动到 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 完成了这项工作。