时间戳

首页 > 解决方案 > 页面加载时自动滚动到 div 的底部

javascript - 页面加载时自动滚动到 div 的底部

问题描述

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

当页面加载时，它应该只是滚动到容器的底部。

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

const chatHistoryRef = React.useRef();

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

标签： javascriptreactjsscroll

解决方案

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

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

推荐阅读