How to automatically scroll the bottom of a div constantly?

Question

I have <div>a scroll. Via javascript I add elements in <div>with element.scrollTop = element.scrollHeight. Works great, except that I have to do this every time an item is added to <div>. Is there a way to automatically scroll (without using setIntervaland repeatedly scrolling) and hold the scroll bar <div>at the bottom?

My <div>:

<div class="messages" style="height: 7em; overflow: scroll">
  <div>Anonymous: Hello</div>
  <div>John: Hi</div>
</div>

Is there an event <div>to change the content?

The UPDATE . I do not have access to the JavaScript code after adding <div>. So I would like to add an event listener or some other mechanism to snap the scrollbar to the bottom.

Answer 1

You can overwrite the method of the addChildtarget element or , which you can use MutationOvserverto observe the DOM.

considering HTML:

<div id="messages-out" class="messages" style="height: 7em; overflow: scroll">
  <div>Anonymous: Hello</div>
  <div>John: Hi</div>
</div>
<input id="txtMessage" type="text" autofocus>

rewritten method method:

document.addEventListener('DOMContentLoaded', function(ev)
{
  var msgs = document.getElementById('messages-out');
  msgs.appendChild = function(childNode)
  {
    Element.prototype.appendChild.call(msgs, childNode);
    msgs.scrollTop = msgs.scrollHeight;
  }

  document.getElementById('txtMessage').addEventListener('keypress', function(ev)
  {
    if(13 === ev.which)
    {
      var div = document.createElement('div');
      div.innerHTML = '<em>nick: </em>' + ev.target.value;
      msgs.appendChild(div);
      ev.target.value = '';
    }
  });
})

MutationObserver approach:

document.addEventListener('DOMContentLoaded', function(ev) {
  var
    msgs     = document.getElementById('messages-out'),
    observer = new MutationObserver(function (mutations)
    {
      var added = false;

      mutations.forEach(function (mutation) {
        if ('childList' === mutation.type && 0 < mutation.addedNodes.length)
          added = true;
      });

      if (added)
        msgs.scrollTop = msgs.scrollHeight;
    })
  ;

  observer.observe(msgs, {childList: true});

  document.getElementById('txtMessage').addEventListener('keypress', function(ev)
  {
    if(13 === ev.which)
    {
      var div = document.createElement('div');
      div.innerHTML = '<em>nick: </em>' + ev.target.value;
      msgs.appendChild(div);
      ev.target.value = '';
    }
  });

});

Note. He is not sure if the method is element.appendChildused to add a message, for example. child can be added to the string Element.prototype.appendChild.call(msgs, childNode);or insertBefore. So the second approach is more about catching everything.

Answer 2

var index = 0. tabIndex index, .value tabIndex. .focus() .

var index = 0;

var div = document.createElement("div");
div.setAttribute("tabIndex", index);
document.querySelector(".messages").appendChild(div);
div.focus();
++index; 

window.onload = function() {
  var messages = document.querySelector(".messages");
  var index = 0;
  setInterval(function() {
    var div = document.createElement("div");
    div.setAttribute("tabIndex", index);
    div.innerHTML = "abc";
    messages.appendChild(div);
    div.focus();
    ++index;
  }, 2000)
}

<div class="messages" style="height: 7em; overflow: scroll">
  <div>Anonymous: Hello</div>
  <div>John: Hi</div>
</div>

Hide result

plnkr https://plnkr.co/edit/34QUtpGNVfho2fmYIlUI?p=preview