让DIV的滚动条自动滚动到最底部的3种方法(推荐)

前端之家收集整理的这篇文章主要介绍了让DIV的滚动条自动滚动到最底部的3种方法(推荐)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_301_0@要制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息。


@H_3010@聊天程序是基于AJAX设计的,没有用框架,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条。


@H
301_0@但同样的代码拿到我这里却完全失效,又仔细查了下资料说XHTML标准下scrollTop的值恒为0,解决办法是使用 document.documentElement.scrollTop代替document.body.scrollTop,讲了半天所解决的是整个页 面的滚动条。这个方法我是用不了了,因为不是框架结构,所以不可能用body的滚动条控制浏览信息。


@H_3010@网上关于这个问题的资料很少,连CSDN上也说没有办法。


@H
301_0@不死心,后来查DHTML手册得知DIV有个doScroll方法可以用来模拟滚动条点击,但很令人失望,到了我这里又是完全失效,难道又不被XHTML支持


@H_301_0@最后终于被我找到三种控制DIV内容滚动的方法


@H_301_0@

方法一:


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


<div class="jb51code">
<pre class="brush:js;">
<script language="javascript1.2" type="text/javascript">
function onGetMessage(context)
{
msg.innerHTML+=context;
msg_end.click();
}

@H_301_0@

方法二:

@H_301_0@利用DIV的scrollIntoView方法,将最底端滚动到可视位置 [list=1]
@H_301_0@

方法三:

将滚动条(scrollbar)保持在最<a href="/tag/dibu/" target="_blank" class="keywords">底部</a>的<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a> - 滚动条,
底部的方法
自动保持在底部

<div id="scrolldIV" style="overflow:auto; height: 100px; width: 400px; border: 1px solid #999;">

@H_301_0@以上就是小编为大家带来的让DIV的滚动条自动滚动到最底部的3种方法(推荐)的全部内容了,希望对大家有所帮助,多多支持编程之家~

猜你在找的JavaScript相关文章