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

方法一：使用锚标记要滚动到的位置，然后通过click方法模拟点击滚动到锚所在位置<script language="javascript1.2" type="text/javascript">function onGetMessage(context){msg.innerHTML+=context;msg_end.click();}</script><div styl

tingkeiii

20247人浏览 · 2022-02-20 20:59:31

tingkeiii · 2022-02-20 20:59:31 发布

方法一：

使用锚标记要滚动到的位置，然后通过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();">