检测滚动到 div 顶部并溢出：在 ReactJs 中滚动

Question

我正在创建消息传递功能。对话只占用 100vh 高度减去标题 - 所以，我必须将其溢出设置为滚动。如何检测用户是否滚动到对话的最顶部？一旦用户滚动到顶部，我将获取较旧的消息。

我做了一些研究，但没有一个有效。我认为它们只适用于可滚动页面。

下面的代码 sn-p 类似于我在网上看到的。但是，滚动永远不会被触发。

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 完成了这项工作。