Question

我有一个<dependency> <groupId>org.xerial</groupId> <artifactId>sqlite-jdbc</artifactId> <version>3.15.1 </version> </dependency>滚动。通过JavaScript，我使用<div>向<div>添加元素。每次将元素添加到element.scrollTop = element.scrollHeight时我都必须这样做。有没有办法自动滚动（不使用<div>并反复滚动）并将setInterval的滚动条固定在底部？

我的<div>：

<div>

内容更改时是否有<div class="messages" style="height: 7em; overflow: scroll"> <div>Anonymous: Hello</div> <div>John: Hi</div> </div>个事件？

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

Answer 1

创建变量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>

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

Answer 2

您可以覆盖目标元素的<{1}}方法或，您可以使用addChild来观察DOM。

给出HTML：

MutationOvserver

覆盖方法方法：

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

MutationObserver方法：

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

注意：我们不确定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.prototype.appendChild.call(msgs, childNode);中添加子项。因此，第二种方法更多的是“赶上所有”＃34;之一。

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

2 个答案: