在 React 中滚动到 div 的底部

在 React 中滚动到 div 的底部：

1. 在 div 的底部添加一个元素。
2. 在底部的元素上设置一个 ref。
3. 当事件发生时，调用 ref 对象的 scrollIntoView() 方法。

import {useEffect, useRef, useState} from 'react';

export default function App() {
  const bottomRef = useRef(null);

  const [messages, setMessages] = useState([]);

  useEffect(() => {
    // ?️ simulate chat messages flowing in
    setInterval(
      () =>
        setMessages(current => [
          ...current,
          'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, quaerat eum id obcaecati, magnam voluptatum dolorem sunt, omnis sed consectetur necessitatibus blanditiis ipsa? Cumque architecto, doloribus mollitia velit non sint!',
        ]),
      600,
    );
  }, []);

  useEffect(() => {
    // ?️ scroll to bottom every time messages change
    bottomRef.current?.scrollIntoView({behavior: 'smooth'});
  }, [messages]);

  return (
    <div>
      <h2>Top of the page</h2>

      <div>
        {messages.map((message, index) => {
          return <p key={index}>{message}</p>;
        })}

        <div ref={bottomRef} />
      </div>
    </div>
  );
}

这段代码展示了每次有新的聊天消息流入时如何滚动到 div 的底部。

对 useEffect 挂钩的第一次调用模拟每 600 毫秒出现的新消息。

我们使用 useRef 钩子初始化了一个 ref。

useRef() 钩子可以传递一个初始值作为参数。 该钩子返回一个可变的 ref 对象，其 .current 属性被初始化为传递的参数。

请注意，我们必须访问 ref 对象的 current 属性才能访问我们设置 ref 属性的 div 元素。

当我们将 ref prop 传递给元素时，例如 <div ref={myRef} />，React 将 ref 对象的 .current 属性设置为对应的 DOM 节点。

我们在第二个 useEffect 挂钩中添加了消息状态变量作为依赖项，因为我们希望每次消息更改时都重新运行挂钩中的代码。

useEffect(() => {
  bottomRef.current?.scrollIntoView({behavior: 'smooth'});
}, [messages]);

我们使用 scrollIntoView 方法滚动到聊天消息容器底部的 div 元素。

behavior 属性指定滚动应该平滑（smooth）还是立即发生（auto）。

behavior 属性的默认值为 auto。

每次消息更改时，都会重新运行 useEffect 挂钩，我们调用 scrollIntoView() 方法滚动到 div 的底部并显示最新消息。

火焰兔

海报 链接