让DIV的滚动条⾃动滚动到最底部-4种⽅法
要制作⼀个的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证⽤户总能看到最新消息。
聊天程序是基于AJAX设计的,没有⽤框架,消息容器是⼀个DIV,所以问题就在于如何控制DIV的滚动条。
但同样的代码拿到我这⾥却完全失效,⼜仔细查了下资料说XHTML标准下scrollTop的值恒为0,解决办法是使⽤
document.documentElement.scrollTop代替document.body.scrollTop,讲了半天所解决的是整个页⾯的滚动条。这个⽅法我是⽤不了了,因为不是框架结构,所以不可能⽤body的滚动条控制浏览信息。
⽹上关于这个问题的资料很少,连CSDN上也说没有办法。
不死⼼,后来查DHTML⼿册得知DIV有个doScroll⽅法可以⽤来模拟滚动条点击,但很令⼈失望,到了我这⾥⼜是完全失效,难道⼜不被XHTML⽀持?
网站底部代码js特效最后终于被我到三种控制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>
⽅法三:
<div id="scrolldIV" >
</div>
<input type="button" value="插⼊⼀⾏" onclick="add();">
<!--************************************* 实例代码结束 *************************************-->
</div>
</div>
</body>
</html>
⽅法4:
这个⽐较复杂也⽐较灵活⼀点,就是利⽤DIV+JS+图⽚构造⼀个滚动条,当然了图⽚是怎么好看怎么⽤了。
主要部分就是外层的DIV加个overflow:hidden属性,通过js代码调整内层DIV的margin-left和margin-top来控制内容的滚动,由于上⾯两种⽅法已经可以满⾜需求,所以这种⽅法没具体做深究,有兴趣的可以试⼀下
分享到:
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论