在頁面加載時自動滾動到 div 的底部

Question

我在 react 中有一個聊天應用程序，並且到目前為止一直使用 npm 包 react-scroll-to-bottom 。 但它沒有維護並拋出警告，所以我認為自己寫這個應該不會太難。 我正在關注 stackoverflow 上的各種答案，但似乎無法正確解決。

它應該在頁面加載時滾動到容器的底部。

任何想法我做錯了什么？ 提前致謝！ 編輯：現在我在樹的末尾有一個 div，它有 ref，因為我認為滾動到它會更容易，而不是試圖告訴 div 在它里面滾動。

const chatHistoryRef = React.useRef();

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

Answer 1

您的useEffect沒有任何依賴項，因此如果 ref 發生變化（如 div 被渲染），則效果將不會運行。 依賴項在第二個參數中設置為數組，如下所示：

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

Answer 2

找到了解決辦法。 因為我現在正在我的應用程序中進行輪詢，所以我每兩秒鍾才收到一次聊天消息。 所以我的功能實際上是滾動，但沒有任何東西可以滾動。 :)

這是我的解決方案。 感謝大家的幫助。 通過向消息依賴項添加長度，只有在有新的聊天消息時才會觸發

  const chatHistoryRef = React.useRef();

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