How to scroll to bottom in react?

by

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.

More Related Contents:

  1. Why calling react setState method doesn’t mutate the state immediately?
  2. When to use React setState callback
  3. How can I persist redux state tree on refresh?
  4. How to use callback with useState hook in react [duplicate]
  5. ReactJS: Why is passing the component initial state a prop an anti-pattern?
  6. React: Expected an assignment or function call and instead saw an expression
  7. Why, exactly, do we need React.forwardRef?
  8. How to set default Checked in checkbox ReactJS?
  9. How to deploy a Flask+React application to Azure Web Service
  10. Call a React component method from outside
  11. How to get the width of a react element
  12. How to allow only numbers in textbox in reactjs?
  13. ReactJS lifecycle method inside a function Component
  14. How to unmount, unrender or remove a component, from itself in a React/Redux/Typescript notification message
  15. Element type is invalid: expected a string (for built-in components) or a class/function
  16. Display Info Window on the multiple coordinates on the arcgis map in Next JS
  17. React: Which is recommended arrow or normal function?
  18. When specified, “proxy” in package.json must be a string
  19. Is it safe to use ref.current as useEffect’s dependency when ref points to a DOM element?
  20. Lazy initial state – What it is and how to use it?
  21. React and Tailwind CSS: dynamically generated classes are not being applied
  22. Create-React-App Proxy in Production Build
  23. how to change jest mock function return value in each test?
  24. How to set build .env variables when running create-react-app build script?
  25. ReactJS – prevState in the new useState React hook?
  26. Image elements do not have explicit width and height
  27. You cannot render a inside another . You should never have more than one in your app
  28. How to go back to previous route in react-router-dom v6
  29. React – “localStorage is not defined” error showing
  30. Is it possible to return empty in react render function?

Leave a Comment