三种控制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. bash脚本计算某程序的进程数

    脚本里面有时候需要判断某个程序是否启动,以及有几个进程下面用nginx来做实例 显示所有的nignx进程 ps -ef|grep nginx |grep -v grep 其中grep -v grep表 ...

  2. Django Rest Framework API指南

    Django Rest Framework API指南 Django Rest Framework 所有API如下: Request 请求 Response 响应 View 视图 Generic vi ...

  3. 终于, Delphi XE2 携带 GDI+ 库了

    终于, Delphi XE2 携带 GDI+ 库了 使用了较早的 http://www.progdigy.com uses Winapi.GDIPAPI, Winapi.GDIPOBJ{, Winap ...

  4. allure2生成html报告

    前言 allure是一个report框架,支持java的Junit/testng等框架,当然也可以支持python的pytest框架,也可以集成到Jenkins上展示高大上的报告界面. 环境准备 1. ...

  5. Selenium学习之==>ActionChainsApi接口详解

    ActionChains UI自动化测试过程中,经常遇到那种,需要鼠标悬浮后,要操作的才会元素出现的这种场景,那么我们就要模拟鼠标悬浮到某一个位置,做一系列的连贯操作,Selenium给我们提供了Ac ...

  6. Elasticsearch 安装head插件

    一.简介 elasticsearch-head是一个界面化的集群操作和管理工具,可以对集群进行傻瓜式操作.你可以通过插件把它集成到es(首选方式),也可以安装成一个独立webapp. Elastics ...

  7. flask-profiler, 监视端点调用并尝试进行某些分析的Flask 事件探查器

    源代码名称:flask-profiler 源代码网址:http://www.github.com/muatik/flask-profiler flask-profiler源代码文档 flask-pro ...

  8. Web高效管理多个项目的SVN仓库

    转至:https://www.jianshu.com/p/a0af00642585 采用方案 Linux+Apache+Subversion+MySQL+JDK+Tomcat+Svnadmin 目录 ...

  9. 递归算法之不用乘号的乘法——用位移实现乘法（dart语言实现）

    前两天突发奇想,写一个乘法的实现,但不用乘号*.并测试一下性能如何.因此就有了下面的代码:(本文主要目的是为了玩递归和位移,因此仅限自然数) 首先,标准乘法: int commonMultiplica ...

  10. 成功秀了一波scala spark ML逻辑斯蒂回归

    1.直接上官方代码,调整过的,方可使用 package com.test import org.apache.spark.{SparkConf, SparkContext} import org.ap ...