How to Scroll to the bottom of a div in React

# Scroll to the bottom of a div in React

To scroll to the bottom of a div in React:

Add an element at the bottom of the div.
Set a ref on the element at the bottom.
When an event occurs, call the scrollIntoView() method on the ref object.

App.js

Copied!
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 the 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>
  );
}

react scroll to bottom

The code for this article is available on GitHub

The code sample shows how to scroll to the bottom of a div every time a new chat message flows in.

The first call to the useEffect hook simulates new messages coming in every 600 milliseconds.

App.js

Copied!
useEffect(() => {
  // 👇️ Simulate chat messages flowing in
  setInterval(
    () =>
      setMessages(current => [
        ...current,
        'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro',
      ]),
    600,
  );
}, []);

We initialized a ref using the useRef hook.

App.js

Copied!
const bottomRef = useRef(null);

The useRef() hook can be passed an initial value as an argument. The hook returns a mutable ref object whose .current property is initialized to the passed argument.

Notice that we have to access the current property on the ref object to get access to the div element on which we set the ref prop.

App.js

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

When we pass a ref prop to an element, e.g. <div ref={myRef} />, React sets the .current property of the ref object to the corresponding DOM node.

We added the messages state variable as a dependency in our second useEffect hook, because we want the code in the hook to be rerun every time the messages change.

App.js

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

The code for this article is available on GitHub

We used the scrollIntoView method to scroll to the div element at the bottom of the chat messages container.

The behavior property specifies whether the scrolling should animate smoothly (smooth), or happen instantly (auto).

The default value for the behavior property is auto.

Every time the messages change, the useEffect hook is rerun and we call the scrollIntoView() method to scroll to the bottom of the div and show the most recent message.

I've also written a detailed guide on how to handle the onScroll event in React.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to Scroll to the bottom of a div in React

# Scroll to the bottom of a div in React

# Additional Resources

Borislav Hadzhiev