JavaScript 实现容器滚动条默认出现在底部位置

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

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

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

完整代码：

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

---