方法一：
使用锚标记要滚动到的位置，然后通过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">&nbsp</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>

方法4：
这个比较复杂也比较灵活一点，就是利用DIV+JS+图片构造一个滚动条，当然了图片是怎么好看怎么用了。
主要部分就是外层的DIV加个overflow:hidden属性，通过js代码调整内层DIV的margin-left和margin-top来控制内容的滚动，由于上面两种方法已经可以满足需求，所以这种方法没具体做深究，有兴趣的可以试一下

让DIV的滚动条自动滚动到最底部 - 4种方法的更多相关文章

  1. [聊天框]让DIV的滚动条自动滚动到最底部 - 4种方法

    要制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息. 聊天程序是基于AJAX设计的,没有用框架,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条. ...

  2. 让DIV的滚动条自动滚动到最底部 - 3种方法

    要制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息. 聊天程序是基于AJAX设计的,没有用框架,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条. ...

  3. 让DIV的滚动条自动滚动到最底部

    一个在线聊天窗口,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息. 我得出的结论是:在选中div时,必须用原生js,jQuery不起作用 <!DOCTYPE> < ...

  4. div浮层，滚动条移动，保持位置不变的4种方法

    div浮层,滚动条移动,保持位置不变的4种方法 div在顶部不变.滚动条滚动,div还是在顶部! 直接上传源码 了: 方法一: <!DOCTYPE html PUBLIC "-//W3 ...

  5. 【Android】Eclipse自动编译NDK/JNI的三种方法

    [Android]Eclipse自动编译NDK/JNI的三种方法 SkySeraph Sep. 18th  2014 Email:skyseraph00@163.com 更多精彩请直接访问SkySer ...

  6. ListCtrl中垂直滚动条自动滚动

    在用ListCtrl控件时,当向该控件中添加数据时,怎么样可以把滚动条时时滚动到最后一行,这样便可看到添加的新数据内容 1 加完数据后执行 EnsureVisible(最后一行索引) 可以保证滚动到最 ...

  7. vue.js学习之 如何在better-scroll加载完成后，自动滚动到最底部

    首先我们需要使用scrollTo这个方法: scrollTo(x, y, time, easing) 参数: {Number} x 横轴坐标(单位 px) {Number} y 纵轴坐标(单位 px) ...

  8. Android 记录和恢复ListView滚动的位置的三种方法

    本文主要介绍记录和恢复listView滚动位置的3种方法(1)记录listView滚动到的位置的坐标(推荐)(2)记录listView显示在屏幕上的第一个item的位置(3)通知适配器数据改变. 有时 ...

  9. WPF RichTextBox滚动条自动滚动实例、文本自动滚动实例

    说明:1.后台代码添加测试 数据 2.使用 richTextBox.ScrollToVerticalOffset()方法,滚动竖直方向滚动条位置 3.使用定时器DispatcherTimer,修改页面 ...

随机推荐

  1. RedHat虚拟机:Vmware Tools的安装

    如果我们仔细看的话,                  就会发现在VMware软件界面的左下角处显示着                  “you don't have VMware Tools in ...

  2. 红帽linux忘记root密码的配置

    1.启动linux,不停按上下键,注意鼠标要点击进去才行. 2.按e键. 3.选择kernel/....       再按e键 4.空格+single 按enter键. 5.按B键,进入root权限. ...

  3. Git学习 -- 冲突解决

    当连个分支对统一文件提交了不同修改时,可能会出现冲突,例如: $ git merge feature1 Auto-merging readme.txt CONFLICT (content): Merg ...

  4. hdu_1007_Quoit Design(最近点对)

    题目连接:hdu_1007_Quoit Design 题意: 给你平面上的一些点,让你找出这些点的最近点对的距离 题解: 采用分治,达到O(nlognlogn)的时间复杂度就能艹过去了 #includ ...

  5. hdu4861（游戏）

    数论问题:试题 题目没有看懂,但是解题方法感觉的确是非常巧妙的,应该是属于数论一方面的试题. 试题分析: 首先是DouBiNan先取,所以肯定优先选取剩余中值最大的,于是不存在说DouBiNan值小的 ...

  6. delphi第2节

  7. Android Studio的使用（十一）--每次打开时选择项目，而不是直接进入上次项目

    1.打开的时候选择打开哪一个项目 2.需要在设置System Setting,不要勾选Reopen last project on startup项.

  8. 转 Fragment 和 FragmentActivity的使用

    今天学习下 Android中的 Fragment 和 FragmentActivity,因为没有4.0手机,平台是2.3.3 所以我是使用 v4 support 包来进行学习. 要想用Fragment ...

  9. 二分图匹配之最佳匹配——KM算法

    今天也大致学了下KM算法,用于求二分图匹配的最佳匹配. 何为最佳?我们能用匈牙利算法对二分图进行最大匹配,但匹配的方式不唯一,如果我们假设每条边有权值,那么一定会存在一个最大权值的匹配情况,但对于KM ...

  10. 模仿 app

    原文链接:http://www.jianshu.com/p/a634b66cb180 前言 作为一个IOS程序员,闲的时候也想自己做一个app练练手,又苦于没有UI设计,也没有好的idea,所以只能先 ...