如何永久地自動滾動到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 。 所以第二種方法更像是“抓住所有”。