默认情况下,设置父盒子有滚动条,若父盒子中的内容超出容器的高度时,滚动条默认在顶部,如图所示:

想要出现滚动条时,滚动条默认在底部,显示最新的内容,效果如下:

只需在按钮的单击事件里,添加一行代码即可:div.scrollTop = div.scrollHeight

完整代码:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="textBox"></div>
<button id="btn">插入文字</button>
<script>
const btn = document.getElementById('btn');
const div = document.getElementById('textBox');
btn.addEventListener('click', () => {
const time = new Date();
div.innerHTML = div.innerHTML + time + '</br>';
// 更改滚动条距离顶部的高度
div.scrollTop = div.scrollHeight;
});
</script>