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


Posted in Javascript onSeptember 24, 2016

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

聊天程序是基于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 style="width:500px;overflow:auto">
<div id="msg" style="overflow:hidden;width:480px;"></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 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>

方法三:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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 = 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();">
<!--************************************* 实例代码结束 *************************************-->
</div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
javascript 面向对象编程  function是方法(函数)
Sep 17 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
微信小程序实现圆形进度条动画
Nov 18 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 Javascript
浅谈js常用内置方法和对象
Sep 24 #Javascript
js原生跨域_用script标签的简单实现
Sep 24 #Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 #Javascript
用js实现简单算法的实例代码
Sep 24 #Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 #Javascript
AngularJS实现星星等级评分功能
Sep 24 #Javascript
完美的js div拖拽实例代码
Sep 24 #Javascript
You might like
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
jquery使用经验小结
2015/05/20 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
个人优缺点自我评价
2014/01/27 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
毕业设计论文评语
2014/12/31 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技