如何用js控件div的滚动条，让它在内容更新时自动滚到底部？
三种控制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>
如何用js控件div的滚动条，让它在内容更新时自动滚到底部？的更多相关文章
- js控制滚动条在内容更新超出时自动滚到底部
//滚动条在内容更新时自动滚到底部var message = document.getElementById('message');message.scrollTop = message.scroll ...
- 响应式的账号登录界面模板完整代码，内置form表单和js控件
响应式的账号登录界面模板,内置form表单和js控件 <!DOCTYPE html> <html lang="en"><head><met ...
- 整理部分JS 控件 WEB前端常用的做成Jsp项目，方便今后直接用
整理部分JS 控件 WEB前端常用的做成Jsp项目,方便今后直接用 最近又没时间了,等用时间了,再加入更多的, 源码下载: http://download.csdn.net/detail/liang ...
- Atitit. Toast alert loading js控件 atiToast v2新特性
Atitit. Toast alert loading js控件 atiToast v2新特性 1. 连续多个txt追加的原理 var txt = document.createElement(& ...
- 自定义JS控件-简单示例
1. 业务需求: 制作 一个按钮对象,然后 像 winfrom 那样调用 就可以了: 首先 我们新建一个 MyControls的 JS文件:(插入如下代码) //这里运用的面向对象的思想 ,新建了 ...
- js控件位置
function ShowSettingDiv() { var div = document.getElementById('ShowDiv'); //将要弹出的层 div.style.display ...
- .net的自定义JS控件，运用了 面向对象的思想 封装 了 控件(.net自定义控件开发的第一天)
大家好!我叫刘晶,很高兴你能看到我分享的文章!希望能对你有帮助! 首先我们来看下几个例子 ,就能看到 如何 自定义控件! 业务需求: 制作 一个 属于 自己的 按钮 对象 ,然后 像 ...
- 学习笔记13_第三方js控件&EasyUI使用
第三方UI包使用思路: 1.先映入各种JS包,包含JS版本包,第三方CSS包,第三方主JS包,第三方语言包. 2.确定要做什么,是对话框还是表格.3.根据Demo和目的,在<body>内, ...
- javascript控件开发之滚动条控件
首先,基于行前几篇开发的的框架,我们在目录 component\ui\下添加文件 com.ui.scrollBar.js, 在文件中定义com.ui.scrollBar类,继承com.ui.windo ...
随机推荐
- mysql 查询表结构 查询索引
首先进入到mysql里 show databases; 选择数据库 use xxxcms; 查询数据库下的表结构 show create table 表名; 这样看着不太好可以后面加\G show c ...
- LVS简介
LVS 编辑 LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统.本项目在1998年5月由章文嵩博士成立,是中国国内最早出现的自由软件项目之一 ...
- asp.net中使用单例
摘要 有这样一个service,需要运行的asp.net站点上,但要保证这个实例是唯一的.单例用来启用聊天机器人,保证唯一,以免启动多个,造成客户端发送消息的时候,会造成每个机器人都发送消息,app收 ...
- hdu4782 Beautiful Soup （模拟）
http://acm.hdu.edu.cn/showproblem.php?pid=4782 2013成都区域赛全题PDF:http://acm.hdu.edu.cn/downloads/2013Ch ...
- Materialize一款不错的框架（装逼必备，想想一帮渣渣们还在说bootstrap的时候，你用materialize，高端洋气，别人仰望着，同事们鄙视的看着你还能不能愉快的玩耍的时候，那种孤高的感觉！-_-//意淫结束）
这个materialize感觉比bootstrap好一点 当然啦中文文档还木有!所以想搞个materialize中文网的可以抢先咯! materialize是谷歌设计制作的一款框架. HOHO,出去别 ...
- R-数据导入
目录 键盘输入 导入文本文件 导入Excel文件 访问数据库管理系统 键盘输入 > mydata <- data.frame(age=numeric(0), gender=characte ...
- iOS 滑动性能优化
iOS 滑动性能优化 目录 一. 减少图层的Blend操作 1. UIView的背景色避免使用clearColor 2. 控件贴图避免使用带alpha的图片 3. UIImageView 使用时避免半 ...
- AlwaysOn可用性组测试环境安装与配置（一）--SQL群集环境搭建
一.测试环境介绍 1. 宿主使用工作站(HYPR-V)基本配置如下: 处理器:Intel(R) Core(TM) i5-4470 CPU @ 3.20GHz 3.20GHz 内存(RAM):8.00G ...
- HDOJ 4768 Flyer
二分.... Flyer Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tota ...
- 【bzoj2060】[Usaco2010 Nov]Visiting Cows拜访奶牛
题目描述 经过了几周的辛苦工作,贝茜终于迎来了一个假期.作为奶牛群中最会社交的牛,她希望去拜访N(1<=N<=50000)个朋友.这些朋友被标号为1..N.这些奶牛有一个不同寻常的交通系统 ...