Automatically scroll down chat div

Question

I have this code, to load chat

function getMessages(letter) {
  var div = $('#messages');
  $.get('msg_show.php', function (data) {
    div.html(data);
  });
}

setInterval(getMessages, 100);

What I have to add, to automatically scroll down #messages div on page load, and again with every new chat post?

This doesn't work:

function getMessages(letter) {
  var div = $('#messages');
  $.get('msg_show.php', function (data) {
    div.html(data);
    $('#messages').scrollTop($('#messages')[0].scrollHeight);
  });
}

setInterval(getMessages, 100);

Should probably be `document.getElementById('messages')` (note the missing `#`) if your element's ID is `messages`. — UweB, Aug 26 '14 at 12:25

score 67 · Accepted Answer · edited Aug 23 '19 at 15:36

Let's review a few useful concepts about scrolling first:

scrollHeight: total container size.
scrollTop: amount of scroll user has done.
clientHeight: amount of container a user sees.

When should you scroll?

User has loaded messages for the first time.
New messages have arrived and you are at the bottom of the scroll (you don't want to force scroll when the user is scrolling up to read previous messages).

Programmatically that is:

if (firstTime) {
  container.scrollTop = container.scrollHeight;
  firstTime = false;
} else if (container.scrollTop + container.clientHeight === container.scrollHeight) {
  container.scrollTop = container.scrollHeight;
}

Full chat simulator (with JavaScript):

https://jsfiddle.net/apvtL9xa/

const messages = document.getElementById('messages');

function appendMessage() {
 const message = document.getElementsByClassName('message')[0];
  const newMessage = message.cloneNode(true);
  messages.appendChild(newMessage);
}

function getMessages() {
 // Prior to getting your messages.
  shouldScroll = messages.scrollTop + messages.clientHeight === messages.scrollHeight;
  /*
   * Get your messages, we'll just simulate it by appending a new one syncronously.
   */
  appendMessage();
  // After getting your messages.
  if (!shouldScroll) {
    scrollToBottom();
  }
}

function scrollToBottom() {
  messages.scrollTop = messages.scrollHeight;
}

scrollToBottom();

setInterval(getMessages, 100);

#messages {
  height: 200px;
  overflow-y: auto;
}

<div id="messages">
  <div class="message">
    Hello world
  </div>
</div>

If your container has a non-integer height, you'll probably need to use `container.scrollTop + container.clientHeight >= container.scrollHeight` as the test. — btmorex, Mar 29 '19 at 09:19
for me, specifying the `height` explicitly for the messages container worked — murtuzaali_surti, May 09 '23 at 07:24

score 15 · Answer 2 · answered Aug 26 '14 at 12:48

It's hard to tell without knowing the HTML code, but I'd assume your div doesn't have a height set and/or doesn't allow overflow (e.g. through CSS height: 200px; overflow: auto).

I've made a working sample on jsfiddle: http://jsfiddle.net/hu4zqq4x/

I created some dummy HTML markup inside a div that is a) overflowing and b) has a set height. Scrolling is done through calling the function

function getMessages(letter) {
    var div = $("#messages");
    div.scrollTop(div.prop('scrollHeight'));
}

, in this case once on 'documentReady'.

prop('scrollHeight') will access the value of the property on the first element in the set of matched elements.

score 9 · Answer 3 · edited Feb 01 '18 at 18:18

9

after append in JQuery,just add this line

<script>
    $("#messages").animate({ scrollTop: 20000000 }, "slow");
</script>

edited Feb 01 '18 at 18:18

Dmitry

6,716
14
37
39

answered Feb 01 '18 at 17:54

Govan

1,322
1
14
13

score 2 · Answer 4 · answered Apr 09 '18 at 02:23

if you just scrollheight it will make a problem when user will want to see his previous message. so you need to make something that when new message come only then the code. use jquery latest version. 1.here I checked the height before message loaded. 2. again check the new height. 3. if the height is different only that time it will scroll otherwise it will not scroll. 4. not in the if condition you can put any ringtone or any other feature that you need. that will play when new message will come. thanks

var oldscrollHeight = $("#messages").prop("scrollHeight");
$.get('msg_show.php', function(data) {
    div.html(data);
    var newscrollHeight = $("#messages").prop("scrollHeight"); //Scroll height after the request
    if (newscrollHeight > oldscrollHeight) {
        $("#messages").animate({
            scrollTop: newscrollHeight
        }, 'normal'); //Autoscroll to bottom of div
    }

Finally a solution which actually worked for me, Thanks :) – Rishabh May 28 '21 at 05:40 — Rishabh, May 28 '21 at 05:40

score 1 · Answer 5 · answered Aug 26 '14 at 12:59

What you need to do is divide it into two divs. One with overflow set to scroll, and an inner one to hold the text so you can get it's outersize.

<div id="chatdiv">
    <div id="textdiv"/>
</div>

textdiv.html("");
$.each(chatMessages, function (i, e) {
    textdiv.append("<span>" + e + "</span><br/>");
});
chatdiv.scrollTop(textdiv.outerHeight());

You can check out a jsfiddle here: http://jsfiddle.net/xj5c3jcn/1/

Obviously you don't want to rebuild the whole text div each time, so take that with a grain of salt - just an example.

score 1 · Answer 6 · answered Oct 26 '17 at 16:01

1

I found out this very simple method while experimenting: set the scrollTo to the height of the div.

var myDiv = document.getElementById("myDiv");
window.scrollTo(0, myDiv.innerHeight);

answered Oct 26 '17 at 16:01

aravk33

469
2
10
18

score 1 · Answer 7 · edited Sep 21 '19 at 19:08

to scroll till particular element from the message box top checkout the following demo:

https://jsfiddle.net/6smajv0t/

function scrollToBottom(){
 const messages = document.getElementById('messages');
 const messagesid = document.getElementById('messagesid');  
 messages.scrollTop = messagesid.offsetTop - 10;
}

scrollToBottom();
setInterval(scrollToBottom, 1000);

#messages {
  height: 200px;
  overflow-y: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="messages">
  <div class="message">
    Hello world1
  </div>
  <div class="message">
    Hello world2
  </div>
  <div class="message">
    Hello world3
  </div>
  <div class="message">
    Hello world4
  </div>
  <div class="message">
    Hello world5
  </div>
  <div class="message">
    Hello world7
  </div>
  <div class="message">
    Hello world8
  </div>
  <div class="message">
    Hello world9
  </div>
  <div class="message" >
    Hello world10
  </div>
  <div class="message">
    Hello world11
  </div>
  <div class="message">
    Hello world12
  </div>
  <div class="message">
    Hello world13
  </div>
  <div class="message">
    Hello world14
  </div>
  <div class="message">
    Hello world15
  </div>
  <div class="message" id="messagesid">
    Hello world16 here
  </div>
  <div class="message">
    Hello world17
  </div>
  <div class="message">
    Hello world18
  </div>
  <div class="message">
    Hello world19
  </div>
  <div class="message">
    Hello world20
  </div>
  <div class="message">
    Hello world21
  </div>
  <div class="message">
    Hello world22
  </div>
  <div class="message">
    Hello world23
  </div>
  <div class="message">
    Hello world24
  </div>
  <div class="message">
    Hello world25
  </div>
  <div class="message">
    Hello world26
  </div>
  <div class="message">
    Hello world27
  </div>
  <div class="message">
    Hello world28
  </div>
  <div class="message">
    Hello world29
  </div>
  <div class="message">
    Hello world30
  </div>
</div>

score 1 · Answer 8 · edited Oct 02 '21 at 23:12

Simple solution:

1 - Place in the bottom of your message (Inside)

<a href="#" class="d-none" id="focus-bottom"></a>

2 - When new message is received:

function getMessages (letter) {
  var div = $('#messages');
  $.get('msg_show.php', function(data){
    div.html(data);
    $('#focus-bottom').focus();
    $('#focus-box-message').focus(); / * FOCUS YOUR TEXTAREA * /
  });
}

setInterval(getMessages, 100);

Anoop Joshi P · Answer 9 · 2014-08-26T12:43:10.593

0

Dont have to mix jquery and javascript. Use like this,

function getMessages(letter) {
    var message=$('#messages');
    $.get('msg_show.php', function(data) {
        message.html(data);
        message.scrollTop(message[0].scrollHeight);
    });
}

setInterval(function() {
    getMessages("letter");
}, 100)

Put the scrollTop() inside get() method.

Also you missed a parameter in the getMessage method call..

edited Aug 26 '14 at 12:43

answered Aug 26 '14 at 12:29

Anoop Joshi P

25,373
8
32
53

Not directly related to the issue, but repeatedly using `$('#messages')` to query for the same element over and over will have a negative impact on performance - and possibly readability. The element can even be selected outside the `getMessages` function. – UweB Aug 26 '14 at 12:39
You are correct. I've edited the answer. But there is no meaning in selecting that element outside getmessage function. Because he need to scroll down to bottom after getting new message. So it should be inside that method only.. – Anoop Joshi P Aug 26 '14 at 12:44

score 0 · Answer 10 · edited Oct 26 '17 at 20:24

0

    var l = document.getElementsByClassName("chatMessages").length;
    document.getElementsByClassName("chatMessages")[l-1].scrollIntoView();

this should work

edited Oct 26 '17 at 20:24

Jauco

1,320
13
23

answered Oct 26 '17 at 19:20

Say your chat box containing chat messages is not in view, then this will scroll the whole page and also bring the chat box into view. Not something you'd want. – Bibek Shrestha Aug 23 '19 at 15:54

Gaurav Saini · Answer 11 · 2018-12-08T14:03:05.633

As I am not master in js but I myself write code which check if user is at bottom. If user is at bottom then chat page will automatically scroll with new message. and if user scroll up then page will not auto scroll to bottom..

JS code -

var checkbottom;
jQuery(function($) {
$('.chat_screen').on('scroll', function() {
    var check = $(this).scrollTop() + $(this).innerHeight() >= $(this) 
[0].scrollHeight;
    if(check) {
       checkbottom = "bottom";
    }
    else {
    checkbottom = "nobottom";
    }
})
});
window.setInterval(function(){
if (checkbottom=="bottom") {
var objDiv = document.getElementById("chat_con");
objDiv.scrollTop = objDiv.scrollHeight;
}
}, 500);

html code -

<div id="chat_con" class="chat_screen">
</div>

score 0 · Answer 12 · answered Feb 24 '20 at 20:20

const messages = document.getElementById('messages');

function appendMessage() {
 const message = document.getElementsByClassName('message')[0];
  const newMessage = message.cloneNode(true);
  messages.appendChild(newMessage);
}

function getMessages() {
 // Prior to getting your messages.
  shouldScroll = messages.scrollTop + messages.clientHeight === messages.scrollHeight;
  /*
   * Get your messages, we'll just simulate it by appending a new one syncronously.
   */
  appendMessage();
  // After getting your messages.
  if (!shouldScroll) {
    scrollToBottom();
  }
}

function scrollToBottom() {
  messages.scrollTop = messages.scrollHeight;
}

scrollToBottom();

setInterval(getMessages, 100);

#messages {
  height: 200px;
  overflow-y: auto;
}

<div id="messages">
  <div class="message">
    Hello world
  </div>
</div>

score 0 · Answer 13 · answered Dec 23 '20 at 17:47

0

I prefer to use Vanilla JS

let chatWrapper = document.querySelector('#chat-messages');
chatWrapper.scrollTo(0, chatWrapper.offsetHeight );

where element.scrollTo(x-coord, y-coord)

answered Dec 23 '20 at 17:47

Jean Leon

1,873
1
8
7

@AdamVýborný Lmao yeah just noticed. – Jun 24 '21 at 19:14
@AdamVýborný that's no reason to dismiss answers. There's still people having this same problem today and maybe the solution you found 7 years ago isn't considered the appropriate approach anymore. – Gustavo Maximo Jul 30 '21 at 14:11
@GustavoMaximo I did not dismiss anything – Adam Výborný Aug 04 '21 at 14:33

score 0 · Answer 14 · answered Mar 29 '21 at 18:33

Use This

function getMessages(letter) {
  var div = $('#messages');
  $.get('msg_show.php', function (data) {
    div.html(data).animate({scrollTop: div.prop("scrollHeight")});
    //use append() if msg_show.php returns single unread msg.
  });
}

setInterval(getMessages, 100);

score 0 · Answer 15 · answered Jan 31 '23 at 04:47

Supports new messages and sets scrolling down automatically is similar to Twitch chat

function Chat() {
    const [messages, setMessages] = useState<string[]>([])
    const container = useRef<HTMLDivElement>(null)

    const autoScroll = () => {
        const { offsetHeight, scrollHeight, scrollTop } = container.current as HTMLDivElement
        if (scrollHeight <= scrollTop + offsetHeight + 100) {
            container.current?.scrollTo(0, scrollHeight)
        }
    }

    useEffect(() => {
        autoScroll()
    }, [messages])

    return (
        <div ref={container}>
            // messages
        </div>
    )
}

score 0 · Answer 16 · answered Aug 25 '23 at 18:17

You can do this with CSS using overflow-anchor: https://caniuse.com/css-overflow-anchor

const scroller = document.getElementById('scroller')
const anchor = document.getElementById('anchor')
let i = 0;
setInterval(() => {
  const p = document.createElement("p")
  p.textContent = `Message ${i++}`
  scroller.insertBefore(p, anchor)
}, 1000)

#scroller {
  /* begin example styling */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* end example styling */
}
#scroller * {
  /* don't allow the children of the scrollable element to be selected as an anchor node */
  overflow-anchor: none;
}

#anchor {
  /* allow the final child to be selected as an anchor node */
  overflow-anchor: auto;
  /* anchor nodes are required to have non-zero area */
  height: 1px;
  /* begin example styling */
  align-self: stretch;
  /* end example styling */
}

<div id="scroller">
  <!-- append content here -->
  <div id="anchor"></div>
</div>

Note that to activate this, the user must first scroll to the bottom of the page. You can work around this by using javascript to trigger an initial scroll as soon as it is possible.

Automatically scroll down chat div

16 Answers16

Linked