How to leave the scroll always down in JavaScript?

Question

I have a div where I would like to always scroll down.

scrollDown(){
  var chatt = this.conversa;
  this.conversa.scrollTop = chatt.scrollHeight;
}

verificKeyPress(e){
  if (e.key == "Enter") {
    this.scrollDown();
    ...
  }
}

            <div id="scroll" ref={(conversa) => this.conversa = conversa} style={{display: "block",overflowY: "auto", overflowX: "hidden", position: "absolute", ...}}>
              ...
            </div>

In this link is a giphy showing the error that is giving. Attention in the sequence entered and where it appears: https://media.giphy.com/media/LUeVZl33p6WlQrVmq9/giphy.gif. Thank you!

Note: In the function verifyKeyPress has more thing to work sending the message, but I did not put it because it is extensive

I got it, the problem is that this function (this.scrollDown) should be in the callback of another function that I did not show here, I apologize, it would be difficult for someone to help me, I have little experience, but anyway thank you.

Has the new message been added at the time `this.scrollDown()` is called? — Ry-, Jul 26 '18 at 19:47
Possible duplicate of https://stackoverflow.com/questions/270612/scroll-to-bottom-of-div — nixkuroi, Jul 26 '18 at 19:52
Possible duplicate of [Scroll to bottom of div?](https://stackoverflow.com/questions/270612/scroll-to-bottom-of-div) — nixkuroi, Jul 26 '18 at 19:53
Nixkuroi, I'm doing la says it, but mine for some reason does not do it correctly — igorchru, Jul 27 '18 at 10:52

score 0 · Answer 1 · answered Jul 26 '18 at 19:45

0

I'm not clear what you are attempting to do. Are you wanting the program to "page down" one screen full each time you hit enter? Or are you wanting to go to the bottom of the entire page w/enter?

In the first case, you'll have to use "view height" * "pageNum" for the scrollTop to allow for a view full to move each time return is hit. This will be tricky as it will be hard to get it to center just right on the top item.

In the second case, I believe scroll height will need to be set to "page height" - "view height". These are "general" values, don't recall the precise JS/CSS var names for these offhand but should be easy to look up

If you'd like to clarify what the desired behavior is I'm happy to look a little deeper

answered Jul 26 '18 at 19:45

Jc Nolan

450
4
15

Imagine a chat, a messenger, where every time I send or receive a message, the scroll should always be below – igorchru Jul 27 '18 at 10:38
Yes, that's a complex system to try to describe. The one thing that does come to mind is that in your approach I'm thinking that the is the command to add the new value which will affect the viewHeight/scrollHeight of the view, but you are setting the scroll even before the new item would be added so adding the new item would likely reset the scroll anyway and require a re-scroll. Not certain what else to add, I've coded things like this before and they are pretty elaborate and tricky to "tune" in general... but once working they rock. – Jc Nolan Aug 01 '18 at 18:24

How to leave the scroll always down in JavaScript?

1 Answers1