Here’s how to implement ‘scroll to bottom’ feature in React. We will discuss how to scroll to bottom of the page, also bottom of the chat, div and table.

A button that scrolls to the bottom in React

If you want to scroll to the bottom of the page, call scrollIntoView() method on the main container. Pass options argument to the scrollIntoView() method.

The block property allows you to specify which part of the element you want to scroll to. If you specify ‘end’, scrollIntoView() takes you to the bottom of the element it is called on.

In this case, we call this method on the main container. So clicking the button would take us to the bottom of the page.

Detailed breakdown

The scrollIntoView() is the native method available for every element in the DOM. When called, it scrolls to that element to make it visible in the viewport.

If you have a long scrollable container, you can call the scrollIntoView() method on <div> element to display its bottom end.

scrollIntoView() accepts options object as an argument. We can use the block option to specify which part of the element (in this case, end / bottom) to scroll into view.

Let’s look at a code example:

To implement this feature, we need a reference to DOM element.

First we create a variable to hold an empty ref (the result of useRef(null)). Then we set the ref prop of the <div> element to this variable.

So we can call scrollIntoView() on div variable, which holds a ref to <div> DOM element.

Finally, create a button element and set its onClick event handler to call scrollIntoView() method on the main container.

You can also go to CodeSandbox to check out a live demo.

Scroll to bottom on mount in React

To do this, we need to call scrollIntoView() method on the main container.

We will also need the useRef() hook to create a ref for the container element.

import "./styles.css";
import { useRef } from "react";

export default function App() {
  const div = useRef(null)
  return (
    <div className="App" ref={div}>
      <h1>Welcome to web application</h1>
    </div>
  );
}

Finally, we will need the useEffect() hook to call the scrollIntoView() method when the component mounts. 

import "./styles.css";
import { useRef, useEffect } from "react";

export default function App() {
  useEffect(()=> div.scrollIntoView({behavior: "smooth", block:"end"}), [])
  const div = useRef(null)
  return (
    <div className="App" ref={div}>
      <h1>Welcome to web application</h1>
    </div>
  );
}

As you may know, passing an empty array [] as second argument to the useEffect() hook means that it will be executed only when the component mounts.

Detailed breakdown

First, we need to create a ref to the main container. We want to scroll to the bottom of the page. So we need a container that wraps around contents of the entire page.

Simply create a variable to store an empty ref.

const div = useRef(null);

Then set element’s ref prop to this variable.

<div className="App" ref={div}>

The React element is now tied to that variable.

Next, we need to call scrollIntoView() on this variable when it mounts. For class components, we can do this in componentDidMount() lifecycle method.

In functional components, we can do this with useEffect() hook.

First argument to the useEffect() hook (a callback function) should call scrollIntoView() on the main container. Second argument should be an empty array. Then the side effect will run only when the component mounts.

export default function App() {
  useEffect(()=> div.scrollIntoView({behavior: "smooth", block:"end"}), [])
  const div = useRef(null)
  return (
    <div className="App" ref={div}>
      <h1>Welcome to web application</h1>
    </div>
  );
}

block: ‘end’ option tells scrollIntoView() scroll to the bottom of the main container.

Scroll to the bottom of the table in React

If you have a scrollable table with many rows of data, you may need a button that scrolls to bottom of the table.

We follow the same basic steps as in previous examples. Store an empty ref (useRef(null)) in a variable and set <table> element’s ref attribute to that variable. Now we can call scrollIntoView() on that variable.

It’s important to set the ref for <table> element, not the <div> that contains it, because the bottom of the <div> is not the same as bottom of the <table>.

In this case, we have a button with a onClick event handler. It uses the same scrollIntoView() method to scroll to bottom of the table.

Scroll to the bottom of the chat in React

Let’s review another example of scroll to bottom feature in React.

We have a simple chat box where we display <Message> components. Whenever user enters a new message, our component generates a new <Message> component and scrolls to the bottom of the chat.

The messages array contains text for each <Message> component.

We also need an <input> field where users can enter their message and hit send.

When users click ‘send’ button, their message should be displayed at the bottom of the chat, and we should scroll to this message.

There’s a lot to unpack here.

First, let’s explain two <div> containers that wrap around messages.

The outer <div> (with className ‘chatbox’) represents a chatbox, which needs to have a fixed height and needs to be scrollable to accomodate many messages.

Inner <div> is directly wrapped around <Message> components. It takes up all the space in the parent container.

We need two containers because one maintains a fixed height, just like a normal chatbox. The other wraps around all messages, and it is expanded as users enter new messages.

If we scroll to the bottom of the fixed height container, it will scroll to its bottom border.

We don’t want to scroll to the bottom border of the chatbox, we want to scroll to the last message. That’s why we call scrollIntoView() on the inner <div> that contains messages.

messages state variable is an array. Each item is a string that needs to be displayed as a message. When users click ‘Send’, we should add current message to this array.

We also make changes to the useEffect() hook. We need to scroll to bottom every time there’s a message. So we add messages state variable (array of messages) to the list of dependencies.

useEffect() works like that – it runs the side effect (call scrollIntoView() on container) when it notices changes to the state variable.

Refs in React

As a JavaScript developer, you may be used to getElementById() method. It is used to store an HTML element in a variable and use it within JavaScript code.

In React, we use something called refs to do the same. It references the DOM element.

In the example above, we have a functional component, so we utilize the useRef() hook to initialize a ref value and store it in the div variable. Then we set the ref attribute of the main <div> element to store a reference to the container.

You can use scrollTo() method to set specific scroll position in React.

UX