让DIV的滚动条⾃动滚动到最底部的3种⽅法（推荐）
要制作⼀个的程序，在做最后的修饰时，需要对获得的信息即时滚动以保证⽤户总能看到最新消息。
聊天程序是基于AJAX设计的，没有⽤框架，消息容器是⼀个DIV，所以问题就在于如何控制DIV的滚动条。
但同样的代码拿到我这⾥却完全失效，⼜仔细查了下资料说XHTML标准下scrollTop的值恒为0，解决办法是使⽤ document.documentElement.scrollTop代替document.body.scrollTop，讲了半天所解决的是整个页⾯的滚动条。这个⽅法我是⽤不了了，因为不是框架结构，所以不可能⽤body的滚动条控制浏览信息。
⽹上关于这个问题的资料很少，连CSDN上也说没有办法。
不死⼼，后来查DHTML⼿册得知DIV有个doScroll⽅法可以⽤来模拟滚动条点击，但很令⼈失望，到了我这⾥⼜是完全失效，难道⼜不被XHTML⽀持？
最后终于被我到三种控制DIV内容滚动的⽅法：
⽅法⼀：
使⽤锚标记要滚动到的位置，然后通过click⽅法模拟点击滚动到锚所在位置
<script language="javascript1.2" type="text/javascript">
function onGetMessage(context)
{
msg.innerHTML+=context;
msg_end.click();
}
</script>
<div >
<div id="msg" ></div>
<div><a id="msg_end" name="1" href="#1"> </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 >
<div id="msg" ></div>
<div id="msg_end" ></div>
</div>
⽅法三：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="滚动条, scrollbar, 页⾯底部, 聊天窗⼝, " />
<meta name="description" content="有些时候（如开发聊天程序），我们需要将将滚动条（scrollbar）保持在最底部，⽐如聊天窗⼝，最新发出和收到的信息要显⽰在最下⽅，如果要看到最下⽅的内容，就必须保证滚动条保持在最底部。" /> <title>将滚动条（scrollbar）保持在最底部的⽅法 - 滚动条, scrollbar, 页⾯底部, 聊天窗⼝, </title>
</head>
<body>
<div id="example">
<h3 id="example_title">将滚动条（scrollbar）保持在最底部的⽅法</h3>
<div id="example_main">
<!--************************************* 实例代码开始 *************************************-->
<script type="text/javascript">
function add()
{
var now = new Date();
var div = ElementById('scrolldIV');
div.innerHTML = div.innerHTML + 'time_' + Time() + '<br />';
div.scrollTop = div.scrollHeight;
}
</script>
<span class="notice">请点击“插⼊⼀⾏”按钮，插⼊最新信息，当出现滚动条时，滚动条将⾃动保持在底部。</span><br />
<div id="scrolldIV" >
</div>
<input type="button" value="插⼊⼀⾏" onclick="add();">
jquery滚动条滚动到底部<!--************************************* 实例代码结束 *************************************-->
</div>
</div>
</body>
</html>
以上就是⼩编为⼤家带来的让DIV的滚动条⾃动滚动到最底部的3种⽅法(推荐)的全部内容了，希望对⼤家有所帮助，多多⽀持~
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论