How to scroll to bottom in react

Question

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

User · Accepted Answer

As Tushar mentioned  you can keep a dummy div at the bottom of your chat   render        return        lt div gt         lt div className  MessageContainer   gt           lt div className  MessagesList  gt             this renderMessages             lt  div gt           lt div style    float  left   clear   both                  ref   el    gt    this messagesEnd   el     gt           lt  div gt         lt  div gt       lt  div gt           and then scroll to it whenever your component is updated  i e  state updated as new messages are added    scrollToBottom        gt      this messagesEnd scrollIntoView   behavior   smooth         componentDidMount       this scrollToBottom       componentDidUpdate       this scrollToBottom        I m using the standard Element scrollIntoView method here

User · Answer

Using React createRef    class MessageBox extends Component           constructor props                super props              this boxRef   React createRef                      scrollToBottom        gt                this boxRef current scrollTop   this boxRef current scrollHeight                    componentDidUpdate        gt                this scrollToBottom                      render                 return                            lt div ref  this boxRef  gt  lt  div gt

User · Answer

Reference your messages container    lt div ref   el    gt    this messagesContainer   el     gt  YOUR MESSAGES  lt  div gt   Find your messages container and make its scrollTop attribute equal scrollHeight   scrollToBottom        gt        const messagesContainer   ReactDOM findDOMNode this messagesContainer       messagesContainer scrollTop   messagesContainer scrollHeight      Evoke above method on componentDidMount and componentDidUpdate   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        gt            const messagesContainer   ReactDOM findDOMNode this messagesContainer           messagesContainer scrollTop   messagesContainer scrollHeight              componentDidMount             this scrollToBottom               componentDidUpdate             this scrollToBottom               render             return                lt div gt                   lt Grid className  storyView  gt                       lt Row gt                           lt div className  codeView  gt                               lt Col md  8  mdOffset  2  gt                                   lt div ref   el    gt    this messagesContainer   el                                           className  chat  gt                                                                                this props messages map function  message  i                                                return                                                    lt div key  i  gt                                                       lt div className  bubble   gt                                                           message body                                                       lt  div gt                                                   lt  div gt                                                                                            this                                                                         lt  div gt                               lt  Col gt                           lt  div gt                       lt  Row gt                   lt  Grid gt               lt  div gt

User · Answer

I created a empty element in the end of messages  and scrolled to that element  No need of keeping track of refs

User · Answer

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        gt       this messagesEnd scrollIntoView   behavior   smooth   block   end   inline   nearest          but if you want to scroll top  you should use this   scrollToTop        gt       this messagesEnd scrollIntoView   behavior   smooth   block   start   inline   nearest             and this codes are common    componentDidMount       this scrollToBottom       componentDidUpdate       this scrollToBottom        render        return        lt div gt         lt div className  MessageContainer   gt           lt div className  MessagesList  gt             this renderMessages             lt  div gt           lt div style    float  left   clear   both                  ref   el    gt    this messagesEnd   el     gt           lt  div gt         lt  div gt       lt  div gt

User · Answer

Full version  Typescript     x000D   x000D  import   as React from  react  x000D   x000D  export class DivWithScrollHere extends React Component lt any  any gt    x000D   x000D    loading any   React createRef    x000D   x000D    componentDidMount     x000D      this loading scrollIntoView false   x000D      x000D   x000D    render     x000D   x000D      return   x000D         lt div ref  e   gt    this loading   e     gt   lt LoadingTile   gt   lt  div gt  x000D        x000D      x000D    x000D   x000D   x000D

User · Answer

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        gt        this messagesEnd current scrollIntoView   behavior   smooth           render          const   messages     this props     return          lt div gt           messages map message   gt   lt Message key  message id      message    gt             lt div ref  this messagesEndRef    gt         lt  div gt               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      gt       const messagesEndRef   useRef null     const scrollToBottom        gt        messagesEndRef current  scrollIntoView   behavior   quot smooth quot            useEffect      gt        scrollToBottom         messages       return        lt div gt         messages map message   gt   lt Message key  message id      message    gt           lt div ref  messagesEndRef    gt       lt  div gt         Also made a  very basic  codesandbox if you wanna check the behaviour https   codesandbox io s scrolltobottomexample-f90lz

User · Answer

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

User · Answer

Do not use findDOMNode  Class components with ref  class MyComponent extends Component     componentDidMount         this scrollToBottom           componentDidUpdate         this scrollToBottom           scrollToBottom         this el scrollIntoView   behavior   smooth             render         return  lt div ref  el   gt    this el   el       gt          Function components with hooks   import React    useRef  useEffect   from  react    const MyComponent        gt      const divRref   useRef null      useEffect      gt        divRef current scrollIntoView   behavior   smooth               return  lt div ref  divRef    gt

User · Answer

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               lt body gt                   lt div ref  quot messageList quot  gt                       lt div gt Message 1 lt  div gt                       lt div gt Message 2 lt  div gt                       lt div gt Message 3 lt  div gt                   lt  div gt               lt  body gt                   scrollToBottom   function which will get reference of the element  and scroll according to scrollIntoView   function    scrollToBottom        gt        const   messageList     this refs      messageList scrollIntoView  behavior   quot smooth quot   block   quot end quot   inline   quot nearest quot          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      gt        if  messageRef current          messageRef current scrollIntoView                      behavior   smooth             block   end             inline   nearest                         OR if you want it to trigger once an action performed  useEffect      gt      if  messageRef current        messageRef current scrollIntoView                  behavior   smooth           block   end           inline   nearest                   stateVariable    And Finally  to your HTML structure return       lt body gt           lt div ref  messageRef  gt      lt   The only different is we are calling a variable here              lt div gt Message 1 lt  div gt               lt div gt Message 2 lt  div gt               lt div gt Message 3 lt  div gt           lt  div gt       lt  body gt     for more explanation about Element scrollIntoView   visit developer mozilla org More detailed explanation in Callback refs visit reactjs org

User · Answer

import React   Component  from  react    export default class ChatOutPut extends Component        constructor props            super props           this state                 messages  props chatmessages                      componentDidUpdate    previousProps  previousState    gt            if  this refs chatoutput    null                this refs chatoutput scrollTop   this refs chatoutput scrollHeight                      renderMessage data            return                lt div key  data key  gt                   data message               lt  div gt                       render             return                lt div ref  chatoutput  className  classes chatoutputcontainer  gt                   this state messages map this renderMessage  this                lt  div gt

User · Answer

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    gt            this refs ref  scrollIntoView   behavior   smooth                 componentDidMount             this scrollToBottom this props message MessageId              render             return               lt div ref  this props message MessageId  gt                   lt div gt Message content here    lt  div gt               lt  div gt                       Here this props message MessageId is the unique ID of the particular chat message passed as props

User · Answer

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          lt ScrollableFeed gt           messages map  message  i    gt   lt div key  i  gt  message  lt  div gt           lt  ScrollableFeed gt                 Just make sure to have a wrapper component with a specific height or max-height  Disclaimer  I am the owner of the package

User · Answer

As another option it is worth looking at react scroll component

User · Answer

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  quot react quot   import React from  quot react quot   import styled from  quot styled-components quot    export interface Props       children  Array lt any gt    any     export function AutoScrollList props  Props        const bottomRef  any   useRef         const scrollToBottom        gt            bottomRef current scrollIntoView               behavior   quot smooth quot               block   quot start quot                           useEffect      gt            scrollToBottom           props children        return            lt Container     props  gt               lt div key   child   gt  props children  lt  div gt               lt div key   dummy   ref  bottomRef   gt           lt  Container gt            const Container   styled div

User · Answer

This is how you would solve this in TypeScript  using the ref to a targeted element where you scroll to    class Chat extends Component  lt TextChatPropsType  TextChatStateType gt      private scrollTarget   React createRef lt HTMLDivElement gt       componentDidMount         this scrollToBottom     scroll to bottom on mount        componentDidUpdate         this scrollToBottom     scroll to bottom when new message was added        scrollToBottom        gt        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  lt div gt       message map  m  Message    gt   lt ChatMessage key   chat--  m id    message  m   gt         lt div ref  this scrollTarget  data-explanation  This is where we scroll to  gt  lt  div gt      lt  div gt      For more information about using ref with React and Typescript you can find a great article here

User · Answer

You can use refs 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    gt           lt MessageBubble         key  message id          message  message body          ref   ref    gt  this   div    idx    ref          gt               return          lt div gt           messageBubbles         lt  div gt                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

User · Answer

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       lt div ref   thing   gt         lt ManyThings things    gt       lt  div gt

User · Answer

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     gt         document getElementById  bottomID   scrollIntoView

User · Answer

Thanks to  enlitement  we should avoid using findDOMNode  we can use refs to keep track of the components  render              return        lt div gt         lt div         className  MessageList          ref   div    gt              this messageList   div                    gt            messageListContent          lt  div gt       lt  div gt            scrollToBottom       const scrollHeight   this messageList scrollHeight    const height   this messageList clientHeight    const maxScrollTop   scrollHeight - height    this messageList scrollTop   maxScrollTop  gt  0   maxScrollTop   0     componentDidUpdate       this scrollToBottom        reference     https   facebook github io react docs react-dom html finddomnode https   www pubnub com blog 2016-06-28-reactjs-chat-app-infinite-scroll-history-using-redux

User · Answer

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      gt    const el   useRef null    useEffect      gt        el current scrollIntoView   block   end   behavior   smooth            return       lt div gt        lt div className  MessageContainer   gt          lt div className  MessagesList  gt            this renderMessages            lt  div gt          lt div id   el   ref  el  gt          lt  div gt        lt  div gt       lt  div gt

[reactjs] How to scroll to bottom in react?

Examples related to reactjs