Skip to content
Youngho Chaa cha cha

Automatically scrolling div element to the bottom

react1 min read

To automatically scroll a <div /> element to the bottom when new content is added in React, you can use a combination of React refs and the useEffect hook.

Using Functional Component with useEffect:

import React, { useRef, useEffect } from 'react';
const ScrollableDiv = ({ content }) => {
const divRef = useRef(null);
useEffect(() => {
const div = divRef.current;
div.scrollTop = div.scrollHeight;
}, [content]); // Only run the effect when `content` changes
return (
<div ref={divRef} style={{ height: '300px', overflowY: 'scroll' }}>

In the examples above:

  • A React ref (divRef) is created to directly interact with the DOM element.
  • When the component updates (new content is added), we set the scrollTop of the <div /> to its scrollHeight. This action scrolls the <div /> to the bottom.
  • The <div /> is styled with a fixed height and overflowY: 'scroll' to make it scrollable.

To use this component, just pass the content as a prop:

<ScrollableDiv content={yourContent} />

Remember, the effect will run whenever the content prop changes, thus scrolling the div to the bottom. Adjust as needed based on your application's requirements.

© 2024 by Youngho Chaa cha cha. All rights reserved.
Theme by LekoArts