reactjs - 使用 scrollTo 反应 ref 会触发滚动事件，即使我们在之后添加它并删除它

Question

我有一个带溢出的 div 和一个滚动容器。在切换此容器中的内容时，我想将它滚动到顶部（新的内容加载它），并且我想添加一个事件侦听器，它只在滚动到顶部之后才在滚动中执行操作。我虽然通过像 ref 和 useEffect 这样简单的东西来实现这一点：

useEffect(() => {
  if (divRef && divRef.current) {
      setCollapsed(false);
      divRef.current.scrollTo(0, 0);
      divRef.current.addEventListener("scroll", onScrollEvent);
  }
  return () => {
    divRef.current!.removeEventListener("scroll", onScrollEvent);
  };
}, [div, divRef]);

对 div 块中的onScrollEvent图例做了一些额外的 css 样式，但只有在用户滚动时才应该是活动的，因此是监听器。

我遇到的问题是scrollTo(0,0)触发器onScrollEvent，它不应该。我已经尝试添加侦听器，因为您可以在scrollTo& 删除它之后看到它。

onScrollEvent只是启用状态更改的简单检查：

 const onScrollEvent = () => {
    if (!userControlled && !collapsed) setCollapsed(true);
  };

发生在我身上的另一件奇怪的事情是，我最终只是使用了一个带有超时的解决方案来检查我们是否在 position 0 === divRef.current.scrollTo，然后添加了事件。但不是我不能再删除该事件。从本质上讲，它总是在监听onScrollEvent该事件中的状态变化userControlled并没有检测到。

标签： reactjs