三种控制DIV内容滚动的方法：

本人qq群也有许多的技术文档，希望可以为你提供一些帮助(非技术的勿加)。

QQ群：   281442983 (点击链接加入群：http://jq.qq.com/?_wv=1027&k=29LoD19) 


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

个人公众号谢谢各位老铁支持

本人qq群也有许多的技术文档，希望可以为你提供一些帮助(非技术的勿加)。

QQ群：   281442983 (点击链接加入群：http://jq.qq.com/?_wv=1027&k=29LoD19) 

我的淘宝店，可以进去逛逛噢：https://shop108912636.taobao.com/index.htm?spm=2013.1.w5001-7867000954.3.1d29318dPlLar7&scene=taobao_shop

控制DIV内容滚动的方法，实现不用拖滚动条就可以看到最新消息的更多相关文章

  1. css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  2. 如何隐藏scroll-Y纵向滚动条，并不影响内容滚动的方法

    网上搜了很多关于隐藏滚动条的文章,发现很多都是只说了如何隐藏scroll-X横向滚动条,对scroll-Y纵向滚动条并没有明确的述说.本文章将介绍3种隐藏滚动条的方法,大家可以结合实际情况,参考文章内 ...

  3. div内容滚动，无缝滚动

    function startmarquee(lh, speed, delay) {        var t;        var oHeight = 373; /** div的高度 **/     ...

  4. jquery鼠标移动div内容上下左右滚动

    jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...

  5. 通过CSS控制页面中的内容垂直居中的方法

    方法一:通过行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之间的距离,如果行高是500px,那么每一行中的文字距离本行的顶部就是25 ...

  6. 3种方法实现CSS隐藏滚动条并可以滚动内容

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其 实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1 ...

  7. jQuery div内容间隔1秒动态向上滚动HTML、JS代码

    demo1: <!DOCTYPE html> <html> <head> <title>div内容间隔1秒动态滚动</title> < ...

  8. TextView不用ScrollViewe也可以滚动的方法

    转自:http://www.jb51.net/article/43377.htm android TextView不用ScrollViewe也可以滚动的方法. TextView textview = ...

  9. div+css实现表头固定内容滚动表格

    <div class="m-demo"> <table> <thead> <tr><th>定宽a</th>& ...

随机推荐

  1. C语言字符数组详解

    字符串的存储方式有字符数组和字符指针,我们先来看看字符数组. 因为字符串是由多个字符组成的序列,所以要想存储一个字符串,可以先把它拆成一个个字符,然后分别对这些字符进行存储,即通过字符数组存储.字符数 ...

  2. 十三、RF中对json的解析

    A.需要安装的库 1.RequestsLibrary,安装命令:pip2 install requests 2.HttpLibrary,安装命令:pip2 install robotframework ...

  3. 中国MOOC_面向对象程序设计——Java语言_第2周 对象交互_1有秒计时的数字时钟

    第2周编程题 查看帮助 返回   第2周编程题,在课程所给的时钟程序的基础上修改 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后由系 ...

  4. 深入理解java：1.3.2 JVM监控与调优

    学习Java GC机制的目的是为了实用,也就是为了在JVM出现问题时分析原因并解决之. 本篇,来看看[ 如何监控和优化GC机制.] 通过学习,我觉得JVM监控与调优,主要在3个着眼点上: 1,如何配置 ...

  5. ansible-playbook -l 选项

    -l <SUBSET>, --limit <SUBSET> further limit selected hosts to an additional pattern 限制脚本 ...

  6. vue使用笔记二

    es6\es2015特性http://lib.csdn.net/article/reactnative/58021?knId=1405 使用express-generator初始化你的项目目录http ...

  7. RHEL 无图形界面安装oracle 11gr2

    RHEL7.3  无图形界面安装oracle 11gr2  使用纯命令安装方式.提供RHEL全量系统镜像.   1.oracle官方下载地址:https://www.oracle.com/techne ...

  8. 学习C++的意义

    1,常见的观点: 1,并不是每个应届生都有机会写操作系统和驱动程序: 2,嵌入式系统也是软家系统,只不过是软件在出厂的时候已经被烧写到硬件中了,用户没有办法修改软件而已,因此嵌入式系统也是软件系统,C ...

  9. 网络流 ISAP算法

    网络流问题: 我自己理解,在流网络中,在不违背容量限制的条件下,解决各种从源点到汇点的问题. ISAP算法概念: 据说不会有卡ISAP时间的题目---时间复杂度O(E^2*V) 首先原理都是基于不断寻 ...

  10. 小白学Python——Matplotlib 学习（2）:pyplot 画图

    matplotlib.pyplot是一组命令样式函数,使matplotlib像MATLAB一样工作.每个pyplot函数都会对图形进行一些更改:例如,创建图形,在图形中创建绘图区域,在绘图区域中绘制一 ...