三种控制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. webpack插件之webpack-dev-server

    webpack插件之webpack-dev-server webpack插件 自动化 webpack-dev-server  现在只需要使用 npm run build指令就可以自动打包,并自动处理好 ...

  2. kafka操作命令

    kafka启动 bin/kafka-server-start.sh -daemon config/server.properties 创建topic bin/kafka-topics.sh -zook ...

  3. 用Vue来实现音乐播放器（三十八）：歌词滚动列表的问题

    1.频繁切换歌曲时,歌词会跳来跳去 原因: // 歌词跳跃是因为内部有一个currentLyric对像内部有一些功能来完成歌词的跳跃 //每个currentLyric能实现歌曲的播放跳到相应的位置 是 ...

  4. Jmeter之插件安装

    在实际工作中,会用到一些额外的jmeter插件,现在描述其插件的安装. 一.下载plugins-manager.jar 在官网中下载plugins-manger.jar,方便后续其他插件的安装,下载地 ...

  5. 中国MOOC_零基础学Java语言_第3周 循环_1奇偶个数

    第3周编程题 查看帮助 返回   第3周编程题 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后由系统即时判分. 2.学生可以在作业截 ...

  6. 禁止SYS和SYSTEM用户远程登录Oracle oracle的sys和system默认密码

    alter system set remote_login_passwordfile=none scope=spfile; system默认:manager sys默认:change_on_insta ...

  7. 【ABAP系列】SAP ABAP smartforms设备类型CNSAPWIN不支持页格式ZXXX

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP smartfo ...

  8. LeetCode.867-转置矩阵（Transpose Matrix）

    这是悦乐书的第332次更新,第356篇原创 01看题和准备 今天介绍的是LeetCode算法题中Easy级别的第202题(顺位题号是867).给定矩阵A,返回A的转置. 矩阵的转置是在其主对角线上翻转 ...

  9. linux系统高级命令进阶

    输出重定向 >:覆盖文件内容 echo "123" > test:把原来的内容覆盖 echo "123" >> test:把原来的存在( ...

  10. 简述Vue项目中返回上一页

    1.背景 由于Vue所生成的项目叫做单页应用,即SPA,如果还是使用jQuery中的go(-)或back()是行不通的,所以,我们使用到了Vue中的编程式导航. 2.基本使用 定义返回按钮: < ...