1

I have an application that contains a small chat window. As per usual with chats, I want it to be scrolled to the bottom by default and scroll to the last message if one is being added.

I already checked some other solutions such as this one, which suggested using useRef and a scrollToElement function. The issue I am having with this is that it does not scroll down in the element I want but instead scrolls down the entire window to that element. I created a codesandbox to illustrate my setup here: https://codesandbox.io/s/upbeat-albattani-zxprz?file=/src/App.js

Using the solution linked above, the entire window starts scrolling instead of just the gray box.

How can I adjust this to my requirements?

isherwood
  • 58,414
  • 16
  • 114
  • 157
Philipp K
  • 193
  • 2
  • 18

2 Answers2

1

You can use the scrollTo method on the window. e.g window.scrollTo(x-axis,y-axis) and since the exact number of pixels to the bottom of the page keep changing according to the content of the page you can use this property on the body document.body.scrollHeight and your code will look like this window.scrollTo(0,document.body.scrollHeight); ** since you're using react add your scroll code inside of a useEffect or a componentDidMount method it doesn't have to be the body it can also be a div element e.g element.scrollHeight here is an example of a code snippet...

Noordin Abdulkadir
  • 81
  • 4
0

Add this

display:'flex',

flexDirection:'column-reverse',

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div
      className="App"
      style={{
        height: "110vh",
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
      }}
    >
      <div
        style={{ display: "flex", overflow: "hidden", position: "relative" }}
      >
        <div
          style={{
            display:'flex',
            flexDirection:'column-reverse',
            overflow: "auto",
            padding: "2rem",
            backgroundColor: "#ebebeb",
            height: "300px",
            fontSize: "2rem"
          }}
        >
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
          rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
          ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
          sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
          dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
          et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
          takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
          amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
          invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
          kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
          amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
          diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
          erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
          et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
          Lorem ipsum dolor sit amet.
        </div>
      </div>
    </div>
  );
}
Sanchit Anand
  • 46
  • 4