页面加载时自动滚动到 div 的底部答案

【问题标题】：Scroll to bottom of div automatically on page load页面加载时自动滚动到 div 的底部
【发布时间】：2020-01-08 22:29:29
【问题描述】：

我在 react 中有一个聊天应用程序，并且到目前为止一直使用 npm 包 react-scroll-to-bottom。但它没有得到维护并发出警告，所以我认为自己写这个应该不会太难。我正在关注 stackoverflow 上的各种答案，但似乎无法正确解决。

它应该在页面加载时滚动到容器的底部。

任何想法我做错了什么？提前致谢！编辑：现在我在树的末尾有一个 div，它有 ref，因为我认为滚动到它会更容易，而不是试图告诉 div 在里面滚动。

const chatHistoryRef = React.useRef();

 React.useEffect(() => {
    window.scrollTo(0, chatHistoryRef.current.offsetTop);
  }, [chatHistoryRef]);

【问题讨论】：

你知道，如果你的if 语句被调用了吗？
是的。刚刚用日志测试了它

标签： javascript reactjs scroll

【解决方案1】：

您的useEffect 没有任何依赖项，因此如果 ref 更改（例如，div 被渲染），效果将不会运行。依赖项在第二个参数中设置为数组，如下所示：

useEffect(() => {
// do something with chatHistoryRef.current
}, [chatHistoryRef.current])

【讨论】：

第 52:6 行：React Hook React.useEffect 有一个不必要的依赖：'chatHistoryRef.current'。
哦，顺便说一句，不应该是 chatHistoryRef.current.scrollHeight 吗？你直接在 ref 上调用它。

【解决方案2】：

找到了解决方案。因为我现在正在我的应用程序中使用轮询，所以我每两秒才收到一次聊天消息。所以我的功能实际上是滚动，但没有任何东西可以滚动。 :)

这是我的解决方案。感谢大家的帮助。通过增加消息依赖的长度，只有在有新的聊天消息时才会触发

  const chatHistoryRef = React.useRef();

  React.useEffect(() => {
    chatHistoryRef.current.scrollIntoView({
      behavior: 'smooth',
      block: 'end'
    });
  }, [chatHistoryRef, messages.length]);

【讨论】：