0

I'm creating a chat app in react.js and I'm having trouble with setting a div element to be scrolled to bottom every componentDidMount call.

I've tried to use these line but it didn't work:

componentDidMount() {
    var objDiv = document.getElementById("scrolling-div");
    objDiv.scrollTop = objDiv.scrollHeight;
  }

this is the div <div className="scroll-chat h-def-chat" id="scrolling-div">...</div> 

  .h-def-chat {
  height: calc(100vh - 140px);
}

.scroll-chat {
  overflow-y: scroll;
  overflow-x: hidden;
  float: left;
}
.scroll-chat::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #f2f2f2;
}

.scroll-chat::-webkit-scrollbar {
  width: 10px;
  background-color: #f2f2f2;
}

.scroll-chat::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: #ccc;
}

I expect the div to be scrolled down every time the component mounts

is there a solution? thx, Guy

Guy Eshel
  • 7
  • 3
  • Duplicate of [How to scroll to bottom in react?](https://stackoverflow.com/questions/37620694/how-to-scroll-to-bottom-in-react). You should be able to get all of the necessary information from that answer, if not please let me know and I can help further :) – John Ruddell Jul 25 '19 at 18:43
  • You can try using ref, instead of getElementById. – Philip Moy Jul 25 '19 at 18:43
  • @JohnRuddell it hadn't solved my problem, I've tried what they said and nothing happened, same result... here is what I've tried: `this.messagesEndRef.current.scrollIntoView();` `this.messagesEndRef.current.scrollTop = this.messagesEndRef.current.scrollHeight;` – Guy Eshel Jul 25 '19 at 20:08
  • You need a placeholder element that you scroll to that is always at the bottom. Make it like 1px height. – John Ruddell Jul 25 '19 at 20:16
  • @GuyEshel I dont get what the issue is, heres essentially the same thing in the other question that I linked. https://codesandbox.io/s/react-typescript-e2e9l. Does that make sense or what else is missing? – John Ruddell Jul 25 '19 at 20:47
  • @JohnRuddell thank you! I solved the problem... the elements in my div mounted after the div element was created(and the placeholder element). – Guy Eshel Jul 25 '19 at 21:10
  • yea, thats why in the other answer it also did the scrolling in `componentDidUpdate()` :) have to make sure the placeholder elem to render to is always at the bottom. Glad you were able to get it working! – John Ruddell Jul 25 '19 at 21:16

1 Answers1

0

You simply need to to window.scrollTo function i.e

componentDidMount() {
    var objDiv = document.getElementById("scrolling-div");
    window.scrollTo(0, objDiv.scrollHeight);
  }

It will let you to bottom of your div.

Here i made one codesandbox for refrence.

Note you dont need to add 0 in scrollTo function. Its totally upto you from where you want to scroll.

Shubham Verma
  • 4,918
  • 1
  • 9
  • 22
  • Your code does not work for me. my div has a static height and its own scroller. in your code, the scrolling of the div depends on the window. – Guy Eshel Jul 25 '19 at 19:30