一个在线聊天窗口，在做最后的修饰时，需要对获得的信息即时滚动以保证用户总能看到最新消息。

我得出的结论是：在选中div时，必须用原生js，jQuery不起作用

<!DOCTYPE>

<html>

<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>

让DIV的滚动条自动滚动到最底部的更多相关文章

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

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

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

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

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

    方法一:使用锚标记要滚动到的位置,然后通过click方法模拟点击滚动到锚所在位置 <script language="javascript1.2" type="te ...

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

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

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

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

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

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

  7. Jquery使两个Div的滚动条同步滚动

    $("#div").scroll(function(){ $("#div1").scrollTop($(this).scrollTop()); // 纵向滚动条 ...

  8. JQuery实现页面刷新滚动条自动滚动到特定位置

    var cotentOffset = $('#6f').offset(); $('.info_box').animate({ scrollLeft: cotentOffset.left }, ); 原 ...

  9. vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

    原文:http://www.jb51.net/article/129270.htm main.js入口文件配合vue-router写这个 router.afterEach((to,from,next) ...

随机推荐

  1. jmeter - 录制web网页

    1.       打开JMeter工具 创建一个线程组(右键点击“测试计划”--->“添加”---->“线程组”) 创建一个http代理服务器(右键点击“工作台”--->“添加”-- ...

  2. 解释器模式Interpreter详解

    原文链接:https://www.cnblogs.com/java-my-life/archive/2012/06/19/2552617.html 在阎宏博士的<JAVA与模式>一书中开头 ...

  3. ReentranLock实现原理

    原文链接:https://blog.csdn.net/jeffleo/article/details/56677425 一.ReentranLock 相信我们都使用过ReentranLock,Reen ...

  4. P2891 [USACO07OPEN]吃饭Dining 最大流

    \(\color{#0066ff}{ 题目描述 }\) 有F种食物和D种饮料,每种食物或饮料只能供一头牛享用,且每头牛只享用一种食物和一种饮料.现在有n头牛,每头牛都有自己喜欢的食物种类列表和饮料种类 ...

  5. 拓扑排序+数学+DP【洛谷P1685】 游览

    P1685 游览 题目描述 顺利通过了黄药师的考验,下面就可以尽情游览桃花岛了! 你要从桃花岛的西头开始一直玩到东头,然后在东头的码头离开.可是当你游玩了一次后,发现桃花岛的景色实在是非常的美丽!!! ...

  6. 通过div实现arcgis自定义infowindow

    通过给地图绑定缩放,单击和平移命令,实现在地图附加div标签,实现infowindow效果: /* *作者 扰扰 *自定义esri弹窗 *paramter Map地图对象 *paramter x *p ...

  7. HTTP Status 415 – Unsupported Media Type(使用@RequestBody后postman调接口报错)

    1.问题描述:使用springMVC框架后,添加数据接口中,入参对象没使用@RequestBody注解,造成postman发起post请求, from-data可以调通接口,但是raw调不通接口,然后 ...

  8. Codeforces Round #526 (Div. 2) D. The Fair Nut and the Best Path 树上dp

    D. The Fair Nut and the Best Path 题意:给出一张图 点有权值 边也要权值 从任意点出发到任意点结束 到每个点的时候都可以获得每个点的权值,而从边走的时候都要消耗改边的 ...

  9. django 异常问题总结

    1.问题1 在继承的类中: 403错误: views 添加:from django.core.context_processors import csrf def TestUEditor(reques ...

  10. 需要提升权限才能运行dism

    利用系统安装盘来安装.net3.5时,遇到的问题. [命令] dism.exe /online /enable-feature /featurename:NetFX3 /Source:F:\sourc ...