让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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
Div Select挡住的解决办法
Aug 07 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
Oct 17 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
Vue操作Storage本地化存储
Apr 29 Vue.js
浅谈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 面向对象详解
2012/09/13 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
document.write的几点使用心得
2014/05/14 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
Python中super的用法实例
2015/05/28 Python
python实现的文件同步服务器实例
2015/06/02 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Python 自动化表单提交实例代码
2017/06/08 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
高级Java程序员面试要点
2013/08/02 面试题
贫困证明书格式及范文
2014/10/15 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书