如何永久地自动滚动到div的底部？

Question

我有一个滚动的<div> 。 通过JavaScript，我使用element.scrollTop = element.scrollHeight向<div>添加元素。 除了每次将一个元素添加到<div>时我都必须这样做，所以效果很好。 有没有办法自动滚动（不使用setInterval并反复滚动）并将<div>的滚动条固定在底部？

我的<div> ：

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

内容发生变化时是否有<div>事件？

更新 ：添加<div> 后 ，我无法轻松访问JavaScript代码。 这就是为什么我喜欢添加事件监听器或其他一些机制来保持滚动条与底部挂钩。

Answer 1

创建变量var index = 0 。 将tabIndex属性添加到动态创建的元素中， index设置为tabIndex属性的.value 。 将元素追加到父元素后，在动态创建的元素上调用.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> 

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

Answer 2

你可以覆盖addChild目标元素的方法，也可以使用MutationOvserver观察DOM。

给定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>

覆盖方法方法：

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方法：

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 = '';
    }
  });

});

注意：不确定element.appendChild方法是否用于添加消息，例如，可以在element.appendChild Element.prototype.appendChild.call(msgs, childNode);添加子element.appendChild Element.prototype.appendChild.call(msgs, childNode); 或者通过insertBefore 。 所以第二种方法更像是“抓住所有”。