I want to build a chat system and automatically scroll to the bottom when entering the window and when new messages come in. How do you automatically scroll to the bottom of a container in React?
27 Answers
As Tushar mentioned, you can keep a dummy div at the bottom of your chat:
render () {
return (
<div>
<div className="MessageContainer" >
<div className="MessagesList">
{this.renderMessages()}
</div>
<div style={{ float:"left", clear: "both" }}
ref={(el) => { this.messagesEnd = el; }}>
</div>
</div>
</div>
);
}
and then scroll to it whenever your component is updated (i.e. state updated as new messages are added):
scrollToBottom = () => {
this.messagesEnd.scrollIntoView({ behavior: "smooth" });
}
componentDidMount() {
this.scrollToBottom();
}
componentDidUpdate() {
this.scrollToBottom();
}
I'm using the standard Element.scrollIntoView method here.
-
3warning from documentation: "findDOMNode cannot be used on functional components." Commented Feb 22, 2017 at 9:09
-
3
this.messagesEnd.scrollIntoView()
worked fine for me. There was no need to usefindDOMNode()
. Commented Jun 7, 2017 at 13:27 -
2That will scroll to bottom even if you scroll up and it will mess up your UI experience. You need a flag to ignore scrolling to bottom on certain scenarios Commented Jul 28, 2017 at 14:29
-
2Ok, I removed findDOMNode. If this doesn't work for someone, you can check the answer's edit history. Commented Dec 8, 2017 at 15:21
-
10I have an error that scrollIntoView is TypeError: Cannot read property 'scrollIntoView' of undefined. What to do?– FeruzaCommented Feb 6, 2018 at 11:55
I just want to update the answer to match the new React.createRef()
method, but it's basically the same, just have in mind the current
property in the created ref:
class Messages extends React.Component {
const messagesEndRef = React.createRef()
componentDidMount () {
this.scrollToBottom()
}
componentDidUpdate () {
this.scrollToBottom()
}
scrollToBottom = () => {
this.messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
}
render () {
const { messages } = this.props
return (
<div>
{messages.map(message => <Message key={message.id} {...message} />)}
<div ref={this.messagesEndRef} />
</div>
)
}
}
UPDATE:
Now that hooks are available, I'm updating the answer to add the use of the useRef
and useEffect
hooks, the real thing doing the magic (React refs and scrollIntoView
DOM method) remains the same:
import React, { useEffect, useRef } from 'react'
const Messages = ({ messages }) => {
const messagesEndRef = useRef<null | HTMLDivElement>(null)
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
}
useEffect(() => {
scrollToBottom()
}, [messages]);
return (
<div>
{messages.map(message => <Message key={message.id} {...message} />)}
<div ref={messagesEndRef} />
</div>
)
}
Also made a (very basic) codesandbox if you wanna check the behaviour https://codesandbox.io/s/scrolltobottomexample-f90lz
-
8componentDidUpdate can call many times in React lifecycle. So, we should check ref this.messagesEnd.current is exist or not in scrollToBottom function. If this.messagesEnd.current does not exist then error message will show TypeError: Cannot read property 'scrollIntoView' of null. So, add this if condition also scrollToBottom = () => { if (this.messagesEnd.current) { this.messagesEnd.current.scrollIntoView({ behavior: 'smooth' }) } }– ArpitCommented Dec 1, 2018 at 20:00
-
1The second example code doesn't works. The
useEffect
method need to be placed with() => {scrollToBottom()}
. Thanks very much anyway– GasparCommented Jan 24, 2020 at 0:39 -
3I had an error with this implementation of
useRef
: "current" isnull
until render. To fix, I putif (messagesEndRef.current)
in the `scrollToBottom function.– JerichoCommented Jan 20, 2021 at 14:40 -
14to fix the typescript error 'TypeScript error: Property 'scrollIntoView' does not exist on type 'never'. TS2339' -> assign the correct type with useRef: const scrollRef = useRef<null | HTMLDivElement>(null) Commented Feb 27, 2021 at 21:28
-
1@DiegoLara the first example (Class component) has a typo, you typed this.messagesEnd.current which is wrong, it should be this.messagesEndRef.current. Commented Oct 10, 2021 at 3:09
Do not use findDOMNode
"because it blocks certain improvements in React in the future"
Class components with ref
class MyComponent extends Component {
componentDidMount() {
this.scrollToBottom();
}
componentDidUpdate() {
this.scrollToBottom();
}
scrollToBottom() {
this.el.scrollIntoView({ behavior: 'smooth' });
}
render() {
return <div ref={el => { this.el = el; }} />
}
}
Function components with hooks:
import React, { useRef, useEffect } from 'react';
const MyComponent = () => {
const divRef = useRef(null);
useEffect(() => {
divRef.current.scrollIntoView({ behavior: 'smooth' });
});
return <div ref={divRef} />;
}
-
2
-
4@steviekins Because "it blocks certains improvements in React" and will likely be deprecated github.com/yannickcr/eslint-plugin-react/issues/… Commented Dec 5, 2017 at 22:26
-
2support for
scrollIntoView
withsmooth
is very poor at the moment. Commented Mar 1, 2018 at 18:54 -
@Andreykul, I seem to be seeing similar results with using 'smooth'. It's not consistent. Commented Oct 19, 2018 at 18:19
-
2
Thanks to @enlitement
we should avoid using findDOMNode
,
we can use refs
to keep track of the components
render() {
...
return (
<div>
<div
className="MessageList"
ref={(div) => {
this.messageList = div;
}}
>
{ messageListContent }
</div>
</div>
);
}
scrollToBottom() {
const scrollHeight = this.messageList.scrollHeight;
const height = this.messageList.clientHeight;
const maxScrollTop = scrollHeight - height;
this.messageList.scrollTop = maxScrollTop > 0 ? maxScrollTop : 0;
}
componentDidUpdate() {
this.scrollToBottom();
}
reference:
-
3I find this solution most appropriate, because it does not add new (dummy) elements to the DOM, but deals literally with the existing , thanks jk2k Commented Jan 31, 2019 at 10:06
-
The easiest and best way I would recommend is.
My ReactJS version: 16.12.0
For Class Components
HTML structure inside render()
function
render()
return(
<body>
<div ref="messageList">
<div>Message 1</div>
<div>Message 2</div>
<div>Message 3</div>
</div>
</body>
)
)
scrollToBottom()
function which will get reference of the element.
and scroll according to scrollIntoView()
function.
scrollToBottom = () => {
const { messageList } = this.refs;
messageList.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
}
and call the above function inside componentDidMount()
and componentDidUpdate()
For Functional Components (Hooks)
Import useRef()
and useEffect()
import { useEffect, useRef } from 'react'
Inside your export function, (same as calling a useState()
)
const messageRef = useRef();
And let's assume you have to scroll when page load,
useEffect(() => {
if (messageRef.current) {
messageRef.current.scrollIntoView(
{
behavior: 'smooth',
block: 'end',
inline: 'nearest'
})
}
})
OR if you want it to trigger once an action performed,
useEffect(() => {
if (messageRef.current) {
messageRef.current.scrollIntoView(
{
behavior: 'smooth',
block: 'end',
inline: 'nearest'
})
}
},
[stateVariable])
And Finally, to your HTML structure
return(
<body>
<div ref={messageRef}> // <= The only different is we are calling a variable here
<div>Message 1</div>
<div>Message 2</div>
<div>Message 3</div>
</div>
</body>
)
for more explanation about Element.scrollIntoView()
visit developer.mozilla.org
More detailed explanation in Callback refs visit reactjs.org
-
6THe ref should actually be declared in the message divs, not in the container Commented Jun 25, 2020 at 15:21
-
1Is there a way to add speed? I have requirement to control the speed of scroll. If user click +1 button, increase the speed of scroll or -1 to decrease the speed. Commented Mar 30, 2022 at 16:59
-
react-scrollable-feed automatically scrolls down to the latest element if the user was already at the bottom of the scrollable section. Otherwise, it will leave the user at the same position. I think this is pretty useful for chat components :)
I think the other answers here will force scroll everytime no matter where the scrollbar was. The other issue with scrollIntoView
is that it will scroll the whole page if your scrollable div was not in view.
It can be used like this :
import * as React from 'react'
import ScrollableFeed from 'react-scrollable-feed'
class App extends React.Component {
render() {
const messages = ['Item 1', 'Item 2'];
return (
<ScrollableFeed>
{messages.map((message, i) => <div key={i}>{message}</div>)}
</ScrollableFeed>
);
}
}
Just make sure to have a wrapper component with a specific height
or max-height
Disclaimer: I am the owner of the package
-
Thanks, I used your control. Note: I had to use forceScroll=true so make it work as desired, for some reason it didn't scroll automatically to the top when the scrollbar began to appear.– PatricCommented Aug 6, 2020 at 12:30
-
@Patric if you could open an issue on GitHub with some details about your setup, maybe we can figure out what's wrong? Commented Aug 11, 2020 at 21:49
-
1This is exactly what I wanted, the control to scroll only when needed and
ScrollIntoView
was only scrolling a little bit, not to the bottom. Commented Aug 24, 2021 at 14:48
I could not get any of below answers to work but simple js did the trick for me:
window.scrollTo({
top: document.body.scrollHeight,
left: 0,
behavior: 'smooth'
});
There are two major problems with the scrollIntoView(...) approach in the top answers:
it's semantically incorrect, as it causes the entire page to scroll if your parent element is scrolled outside the window boundaries. The browser literally scrolls anything it needs to in getting the element visible.
in a functional component using useEffect(), you get unreliable results, at least in Chrome 96.0.4665.45. useEffect() gets called too soon on page reload and the scroll doesn't happen. Delaying scrollIntoView with setTimeout(..., 0) fixes it for page reload, but not first load in a fresh tab, at least for me. shrugs
Here's the solution I've been using, it's solid and is more compatible with older browsers:
function Chat() {
const chatParent = useRef<HTMLDivElement(null);
useEffect(() => {
const domNode = chatParent.current;
if (domNode) {
domNode.scrollTop = domNode.scrollHeight;
}
})
return (
<div ref={chatParent}>
...
</div>
)
}
-
This works great! Additionally, I'd add some threshold when to do the auto-scrolling, you don't want to scroll if the user is looking at the history, right?– CrysfelCommented Dec 1, 2021 at 16:43
-
@Crysfel I agree, but I don't know if browsers have a scroll start/end event, in which case there's no clean way to pull this off without implementing your own scrollbars or hacking something. Possible hacks: use the scroll event and a timer, use mousedown/mouseup and some guesswork, or simply don't scroll when the mouse is down or chat window has focus. Commented Dec 2, 2021 at 18:39
-
Lil' typo in the generic usage of your
useRef
, @KaiArnold. Throw in another>
!– jmealyCommented Feb 5, 2022 at 16:50 -
Works well. Is there a way the scroll event can be animated? Commented May 7, 2022 at 15:52
If you want to do this with React Hooks, this method can be followed. For a dummy div has been placed at the bottom of the chat. useRef Hook is used here.
Hooks API Reference : https://reactjs.org/docs/hooks-reference.html#useref
import React, { useEffect, useRef } from 'react';
const ChatView = ({ ...props }) => {
const el = useRef(null);
useEffect(() => {
el.current.scrollIntoView({ block: 'end', behavior: 'smooth' });
});
return (
<div>
<div className="MessageContainer" >
<div className="MessagesList">
{this.renderMessages()}
</div>
<div id={'el'} ref={el}>
</div>
</div>
</div>
);
}
You can use ref
s to keep track of the components.
If you know of a way to set the ref
of one individual component (the last one), please post!
Here's what I found worked for me:
class ChatContainer extends React.Component {
render() {
const {
messages
} = this.props;
var messageBubbles = messages.map((message, idx) => (
<MessageBubble
key={message.id}
message={message.body}
ref={(ref) => this['_div' + idx] = ref}
/>
));
return (
<div>
{messageBubbles}
</div>
);
}
componentDidMount() {
this.handleResize();
// Scroll to the bottom on initialization
var len = this.props.messages.length - 1;
const node = ReactDOM.findDOMNode(this['_div' + len]);
if (node) {
node.scrollIntoView();
}
}
componentDidUpdate() {
// Scroll as new elements come along
var len = this.props.messages.length - 1;
const node = ReactDOM.findDOMNode(this['_div' + len]);
if (node) {
node.scrollIntoView();
}
}
}
I created a empty element in the end of messages, and scrolled to that element. No need of keeping track of refs.
-
-
@mmla What was the problem that you faced with Safari? Does it not scroll reliably? Commented Mar 25, 2020 at 12:08
Reference your messages container.
<div ref={(el) => { this.messagesContainer = el; }}> YOUR MESSAGES </div>
Find your messages container and make its
scrollTop
attribute equalscrollHeight
:scrollToBottom = () => { const messagesContainer = ReactDOM.findDOMNode(this.messagesContainer); messagesContainer.scrollTop = messagesContainer.scrollHeight; };
Evoke above method on
componentDidMount
andcomponentDidUpdate
.componentDidMount() { this.scrollToBottom(); } componentDidUpdate() { this.scrollToBottom(); }
This is how I am using this in my code:
export default class StoryView extends Component {
constructor(props) {
super(props);
this.scrollToBottom = this.scrollToBottom.bind(this);
}
scrollToBottom = () => {
const messagesContainer = ReactDOM.findDOMNode(this.messagesContainer);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
};
componentDidMount() {
this.scrollToBottom();
}
componentDidUpdate() {
this.scrollToBottom();
}
render() {
return (
<div>
<Grid className="storyView">
<Row>
<div className="codeView">
<Col md={8} mdOffset={2}>
<div ref={(el) => { this.messagesContainer = el; }}
className="chat">
{
this.props.messages.map(function (message, i) {
return (
<div key={i}>
<div className="bubble" >
{message.body}
</div>
</div>
);
}, this)
}
</div>
</Col>
</div>
</Row>
</Grid>
</div>
);
}
}
This is a great usecase for useLayoutEffect as taught by Kent C. Dodds.
https://kentcdodds.com/blog/useeffect-vs-uselayouteffect
if your effect is mutating the DOM (via a DOM node ref) and the DOM mutation will change the appearance of the DOM node between the time that it is rendered and your effect mutates it, then you don't want to use useEffect.
In my case i was dynamically generating elements at the bottom of a div so i had to add a small timeout.
const bottomRef = useRef<null | HTMLDivElement>(null);
useLayoutEffect(() => {
setTimeout(function () {
if (bottomRef.current) bottomRef.current.scrollTop = bottomRef.current.scrollHeight;
}, 10);
}, [transactionsAmount]);
Working Example:
You can use the DOM scrollIntoView
method to make a component visible in the view.
For this, while rendering the component just give a reference ID for the DOM element using ref
attribute. Then use the method scrollIntoView
on componentDidMount
life cycle. I am just putting a working sample code for this solution. The following is a component rendering each time a message received. You should write code/methods for rendering this component.
class ChatMessage extends Component {
scrollToBottom = (ref) => {
this.refs[ref].scrollIntoView({ behavior: "smooth" });
}
componentDidMount() {
this.scrollToBottom(this.props.message.MessageId);
}
render() {
return(
<div ref={this.props.message.MessageId}>
<div>Message content here...</div>
</div>
);
}
}
Here this.props.message.MessageId
is the unique ID of the particular chat message passed as props
-
Amazing Sherin bhai it is working like a cake.Thank you Commented Oct 13, 2018 at 5:46
-
thank you 'metakermit' for his good answer, but I think we can make it a bit better, for scroll to bottom, we should use this:
scrollToBottom = () => {
this.messagesEnd.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
}
but if you want to scroll top, you should use this:
scrollToTop = () => {
this.messagesEnd.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
}
and this codes are common:
componentDidMount() {
this.scrollToBottom();
}
componentDidUpdate() {
this.scrollToBottom();
}
render () {
return (
<div>
<div className="MessageContainer" >
<div className="MessagesList">
{this.renderMessages()}
</div>
<div style={{ float:"left", clear: "both" }}
ref={(el) => { this.messagesEnd = el; }}>
</div>
</div>
</div>
);
}
import React, {Component} from 'react';
export default class ChatOutPut extends Component {
constructor(props) {
super(props);
this.state = {
messages: props.chatmessages
};
}
componentDidUpdate = (previousProps, previousState) => {
if (this.refs.chatoutput != null) {
this.refs.chatoutput.scrollTop = this.refs.chatoutput.scrollHeight;
}
}
renderMessage(data) {
return (
<div key={data.key}>
{data.message}
</div>
);
}
render() {
return (
<div ref='chatoutput' className={classes.chatoutputcontainer}>
{this.state.messages.map(this.renderMessage, this)}
</div>
);
}
}
I like doing it the following way.
componentDidUpdate(prevProps, prevState){
this.scrollToBottom();
}
scrollToBottom() {
const {thing} = this.refs;
thing.scrollTop = thing.scrollHeight - thing.clientHeight;
}
render(){
return(
<div ref={`thing`}>
<ManyThings things={}>
</div>
)
}
This is how you would solve this in TypeScript (using the ref to a targeted element where you scroll to):
class Chat extends Component <TextChatPropsType, TextChatStateType> {
private scrollTarget = React.createRef<HTMLDivElement>();
componentDidMount() {
this.scrollToBottom();//scroll to bottom on mount
}
componentDidUpdate() {
this.scrollToBottom();//scroll to bottom when new message was added
}
scrollToBottom = () => {
const node: HTMLDivElement | null = this.scrollTarget.current; //get the element via ref
if (node) { //current ref can be null, so we have to check
node.scrollIntoView({behavior: 'smooth'}); //scroll to the targeted element
}
};
render <div>
{message.map((m: Message) => <ChatMessage key={`chat--${m.id}`} message={m}/>}
<div ref={this.scrollTarget} data-explanation="This is where we scroll to"></div>
</div>
}
For more information about using ref with React and Typescript you can find a great article here.
This works for me
messagesEndRef.current.scrollTop = messagesEndRef.current.scrollHeight
where const messagesEndRef = useRef(); to use
Using React.createRef()
class MessageBox extends Component {
constructor(props) {
super(props)
this.boxRef = React.createRef()
}
scrollToBottom = () => {
this.boxRef.current.scrollTop = this.boxRef.current.scrollHeight
}
componentDidUpdate = () => {
this.scrollToBottom()
}
render() {
return (
<div ref={this.boxRef}></div>
)
}
}
-
This doesn't entirely scroll to the bottom could you please advice– user11720628Commented Jul 7, 2021 at 17:09
This is modified from an answer above to support 'children' instead of a data array.
Note: The use of styled-components is of no importance to the solution.
import {useEffect, useRef} from "react";
import React from "react";
import styled from "styled-components";
export interface Props {
children: Array<any> | any,
}
export function AutoScrollList(props: Props) {
const bottomRef: any = useRef();
const scrollToBottom = () => {
bottomRef.current.scrollIntoView({
behavior: "smooth",
block: "start",
});
};
useEffect(() => {
scrollToBottom()
}, [props.children])
return (
<Container {...props}>
<div key={'child'}>{props.children}</div>
<div key={'dummy'} ref={bottomRef}/>
</Container>
);
}
const Container = styled.div``;
In order to scroll down to the bottom of the page first we have to select an id which resides at the bottom of the page. Then we can use the document.getElementById to select the id and scroll down using scrollIntoView(). Please refer the below code.
scrollToBottom= async ()=>{
document.getElementById('bottomID').scrollIntoView();
}
I have face this problem in mweb/web.All the solution is good in this page but all the solution is not working while using android chrome browser . So for mweb and web I got the solution with some minor fixes.
import { createRef, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { AppState } from 'redux/store';
import Message from '../Message/Message';
import styles from './MessageList.module.scss';
const MessageList = () => {
const messagesEndRef: any = createRef();
const { messages } = useSelector((state: AppState) => state?.video);
const scrollToBottom = () => {
//this is not working in mWeb
// messagesEndRef.current.scrollIntoView({
// behavior: 'smooth',
// block: 'end',
// inline: 'nearest',
// });
const scroll =
messagesEndRef.current.scrollHeight -
messagesEndRef.current.clientHeight;
messagesEndRef.current.scrollTo(0, scroll);
};
useEffect(() => {
if (messages.length > 3) {
scrollToBottom();
}
}, [messages]);
return (
<section className={styles.footerTopSection} ref={messagesEndRef} >
{messages?.map((message: any) => (
<Message key={message.id} {...message} />
))}
</section>
);
};
export default MessageList;
const scrollingBottom = () => {
const e = ref;
e.current?.scrollIntoView({
behavior: "smooth",
block: "center",
inline: "start",
});
};
useEffect(() => {
scrollingBottom();
});
<span ref={ref}>{item.body.content}</span>
it works fine for me
import * as Yup from 'yup';
import { Button, FormikInput } from '@/components';
import styles from './MessagesBlock.module.scss';
import { useAppSelector } from '@/hooks/redux';
import { IInitialValues, IMessagesBlockProps } from './MessagesBlock.types';
import { useFormik } from 'formik';
import { MessageItem } from '../MessageItem/MessageItem';
import { useEffect, useRef } from 'react';
const initialValues: IInitialValues = {
message: ''
};
export const loginValidation = Yup.object().shape({
message: Yup.string()
.min(2, 'Should be 3+ symbols')
.required('This Field is Required')
});
export const MessagesBlock = ({
onSendMessage,
messages
}: IMessagesBlockProps): JSX.Element => {
const messagesEndRef = useRef<HTMLDivElement>(null);
const { user } = useAppSelector(s => s.userReducer);
const formik = useFormik<IInitialValues>({
initialValues,
validationSchema: loginValidation,
onSubmit: values => {
onSendMessage(values.message);
formik.setSubmitting(false);
formik.resetForm();
}
});
useEffect(() => {
if (messagesEndRef.current) {
messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
messagesEndRef.current.scrollTop = messagesEndRef.current.scrollHeight;
}
}, [messages.length]);
return (
<div className={styles.messagesBlockWrapper}>
<div ref={messagesEndRef} className={styles.messages}>
{messages.map(m => (
<MessageItem
key={m.id}
message={m}
isMyMessage={m.user._id === user?._id}
/>
))}
</div>
<form
onSubmit={formik.handleSubmit}
autoComplete="off"
className={styles.messagesBlockActionsWrapper}
>
<FormikInput
key="message"
name="message"
placeholder="Your message..."
formik={formik}
/>
<Button type="submit" disabled={formik.isSubmitting || !formik.isValid}>
Send
</Button>
</form>
</div>
);
};
Full version (Typescript):
import * as React from 'react'
export class DivWithScrollHere extends React.Component<any, any> {
loading:any = React.createRef();
componentDidMount() {
this.loading.scrollIntoView(false);
}
render() {
return (
<div ref={e => { this.loading = e; }}> <LoadingTile /> </div>
)
}
}
-
this gives all kind of errors for me:
Property 'scrollIntoView' does not exist on type 'RefObject<unknown>'.
andType 'HTMLDivElement | null' is not assignable to type 'RefObject<unknown>'. Type 'null' is not assignable to type 'RefObject<unknown>'.
so...– dcsanCommented Jul 2, 2019 at 17:28 -