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

最新推荐文章于 2024-06-07 15:15:23 发布

原创最新推荐文章于 2024-06-07 15:15:23 发布 · 1.6k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #JavaScript

前端基础同时被 2 个专栏收录

111 篇文章

订阅专栏

解决办法

17 篇文章

订阅专栏

博客介绍了在前端开发中，默认情况下父盒子内容超出高度时滚动条在顶部，若要让滚动条默认在底部显示最新内容，只需在按钮单击事件里添加一行代码，并给出了完整代码，还提供了博客访问链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

只需在按钮的单击事件里，添加一行代码即可：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>