让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 onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
jquery 常用操作方法
Jan 28 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
BootStrap中
Dec 10 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
详解Vue template 如何支持多个根结点
Feb 10 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 Javascript
js正则表达式简单校验方法
Jan 03 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
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
详解Layer弹出层样式
2017/08/21 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
python找出完数的方法
2018/11/12 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
Python绘制动态水球图过程详解
2020/06/03 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
彪马法国官网:PUMA法国
2019/12/15 全球购物
经济管理专业毕业生推荐信
2013/11/11 职场文书
个人自我鉴定写法
2013/11/30 职场文书
行政总经理岗位职责
2013/12/05 职场文书
银行类自荐信
2014/02/04 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
团支部推优材料
2014/05/21 职场文书
元旦晚会活动总结
2014/07/09 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书