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

User · Answer

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>

User · Answer

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

User · Answer

to scroll till particular element from the message box top checkout the following demo   https   jsfiddle net 6smajv0t    x000D   x000D  function scrollToBottom    x000D   const messages   document getElementById  messages    x000D   const messagesid   document getElementById  messagesid      x000D   messages scrollTop   messagesid offsetTop - 10  x000D    x000D   x000D  scrollToBottom    x000D  setInterval scrollToBottom  1000   x000D   messages   x000D    height  200px  x000D    overflow-y  auto  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt div id  messages  gt  x000D     lt div class  message  gt  x000D      Hello world1 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world2 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world3 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world4 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world5 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world7 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world8 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world9 x000D     lt  div gt  x000D     lt div class  message   gt  x000D      Hello world10 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world11 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world12 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world13 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world14 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world15 x000D     lt  div gt  x000D     lt div class  message  id  messagesid  gt  x000D      Hello world16 here x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world17 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world18 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world19 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world20 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world21 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world22 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world23 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world24 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world25 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world26 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world27 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world28 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world29 x000D     lt  div gt  x000D     lt div class  message  gt  x000D      Hello world30 x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

var l   document getElementsByClassName  chatMessages   length      document getElementsByClassName  chatMessages   l-1  scrollIntoView      this should work

User · Answer

x000D   x000D  const messages   document getElementById  messages    x000D   x000D  function appendMessage     x000D   const message   document getElementsByClassName  message   0   x000D    const newMessage   message cloneNode true   x000D    messages appendChild newMessage   x000D    x000D   x000D  function getMessages     x000D      Prior to getting your messages  x000D    shouldScroll   messages scrollTop   messages clientHeight     messages scrollHeight  x000D       x000D       Get your messages  we ll just simulate it by appending a new one syncronously  x000D        x000D    appendMessage    x000D       After getting your messages  x000D    if   shouldScroll    x000D      scrollToBottom    x000D      x000D    x000D   x000D  function scrollToBottom     x000D    messages scrollTop   messages scrollHeight  x000D    x000D   x000D  scrollToBottom    x000D   x000D  setInterval getMessages  100   x000D   messages   x000D    height  200px  x000D    overflow-y  auto  x000D    x000D   lt div id  messages  gt  x000D     lt div class  message  gt  x000D      Hello world x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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  gt  oldscrollHeight                messages   animate               scrollTop  newscrollHeight             normal      Autoscroll to bottom of div

User · Answer

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     lt div id  chatdiv  gt       lt div id  textdiv   gt   lt  div gt   textdiv html        each chatMessages  function  i  e        textdiv append   lt span gt     e     lt  span gt  lt br  gt         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

User · Answer

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    x000D   x000D  const messages   document getElementById  messages    x000D   x000D  function appendMessage     x000D   const message   document getElementsByClassName  message   0   x000D    const newMessage   message cloneNode true   x000D    messages appendChild newMessage   x000D    x000D   x000D  function getMessages     x000D      Prior to getting your messages  x000D    shouldScroll   messages scrollTop   messages clientHeight     messages scrollHeight  x000D       x000D       Get your messages  we ll just simulate it by appending a new one syncronously  x000D        x000D    appendMessage    x000D       After getting your messages  x000D    if   shouldScroll    x000D      scrollToBottom    x000D      x000D    x000D   x000D  function scrollToBottom     x000D    messages scrollTop   messages scrollHeight  x000D    x000D   x000D  scrollToBottom    x000D   x000D  setInterval getMessages  100   x000D   messages   x000D    height  200px  x000D    overflow-y  auto  x000D    x000D   lt div id  messages  gt  x000D     lt div class  message  gt  x000D      Hello world x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

after append in JQuery just add this line   lt script gt          messages   animate   scrollTop  20000000     slow     lt  script gt

User · Answer

I prefer to use Vanilla JS let chatWrapper   document querySelector   chat-messages    chatWrapper scrollTo 0  chatWrapper offsetHeight     where element scrollTo x-coord  y-coord

User · Answer

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

[javascript] Automatically scroll down chat div

Examples related to javascript

Examples related to jquery

Examples related to scroll

Examples related to chat