Question

我有固定宽度和高度的div。 Div包含无序列表并具有css overflow-y: scroll属性。在javascript中，我有一个功能，当用户点击列表下方的按钮时会触发该功能，并且该功能会添加一个列表项。当div内的内容太多时，列表底部会添加新的列表项，用户需要滚动列表才能看到新的列表项。有可能以某种方式使滚动条自动滚动以及添加新内容，以便最后添加的列表项始终可见吗？

HTML：

<ul id="scroll">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<button type="button" id="click">Click</button>

的CSS：

ul {
  height: 100px;
  width: 100px;
  overflow-y: scroll;
  border: 1px solid black;
}

使用Javascript：

function addListItem(){
    var message = document.createElement('li');
  message.innerHTML = 'd';

  document.getElementById('scroll').appendChild(message);
}

document.getElementById('click').addEventListener('click', addListItem, true);

JS小提琴链接：https://jsfiddle.net/8gjhatvt/2/

Answer 1

将滚动div的Element.scrollTop属性设置为页面中新元素的位置+新元素在其父元素中的偏移量。

例如在addListItem（）函数中添加以下行：

document.getElementById('scroll').scrollTop = message.offsetHeight + message.offsetTop;

工作小提琴：https://jsfiddle.net/rvnj6mc3/

Answer 2

将此代码添加到addListItem（）函数：

var scroll=document.getElementById("scroll");
scroll.scrollTop = scroll.scrollHeight;

Css滚动条自动滚动添加了内容

2 个答案: