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

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

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

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

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

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

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

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

方法一:

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

方法二:

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

方法三:

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

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

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

原文链接:https://www.f2er.com/js/45598.html

猜你在找的JavaScript相关文章