让DIV的滚动条自动滚动到最底部的3种方法

转载已于 2022-12-21 16:07:11 修改 · 2.7w 阅读

17 ·

CC 4.0 BY-SA版权

原文链接：https://www.jb51.net/article/93425.htm

文章标签：

#javascript #css #html

于 2022-02-20 20:59:31 首次发布

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

方法一：

使用锚标记要滚动到的位置，然后通过click方法模拟点击滚动到锚所在位置

<script language="javascript1.2" type="text/javascript">
function onGetMessage(context) 
{
msg.innerHTML+=context;
msg_end.click(); 
} 
</script>
<div style="width:500px;overflow:auto">
<div id="msg" style="overflow:hidden;width:480px;"></div>
<div><a id="msg_end" name="1" href="#1">&nbsp</a></div>
</div>

方法二：

利用DIV的scrollIntoView方法，将最底端滚动到可视位置 [list=1]<script

language="javascript1.2"
type="text/javascript">
function onGetMessage(context) 
{
msg.innerHTML+=context;
msg_end.scrollIntoView(); 
} 
</script>
<div style="width:500px;overflow:auto">
<div id="msg" style="overflow:hidden;width:480px;"></div>
<div id="msg_end" style="height:0px; overflow:hidden"></div>
</div>

方法三：

<script type="text/javascript">
function add()
{
var now = new Date();
var div = document.getElementById('scrolldIV');
div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '<br />';
div.scrollTop = div.scrollHeight;
}
</script>
<span class="notice">请点击“插入一行”按钮，插入最新信息，当出现滚动条时，滚动条将自动保持在底部。</span><br />
 
<div id="scrolldIV" style="overflow:auto; height: 100px; width: 400px; border: 1px solid #999;">
</div>
<input type="button" value="插入一行" onclick="add();">