zoukankan      html  css  js  c++  java
  • 滚动条一直置于页面底部,开发聊天程序须知。

    摘要: 有些时候(如开发聊天程序),我们需要将将滚动条(scrollbar)保持在最底部,比如聊天窗口,最新发出和收到的信息要显示在最下方,如果要看到最下方的内容,就必须保证滚动条保持在最底部。

          有些时候(如开发聊天程序),我们需要将将滚动条(scrollbar)保持在最底部,比如聊天窗口,最新发出和收到的信息要显示在最下方,如果要看到最下方的内容,就必须保证滚动条保持在最底部。

    <!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 />';
                            console.log(div.scrollHeight);
                            div.scrollTop = div.scrollHeight;
                        }
                    </script>
                    <span class="notice">请点击“插入一行”按钮,插入最新信息,当出现滚动条时,滚动条将自动保持在底部。</span><br />
    
                    <div id="scrolldIV" style="overflow:auto; height: 100px;  400px; border: 1px solid #999;">
                    </div>
                    <input type="button" value="插入一行" onclick="add();">
                    <!--************************************* 实例代码结束 *************************************-->
                </div>
            </div>
        </body>
    
    </html>

    只要加入一段代码:

    div.scrollTop = div.scrollHeight;
    

    就能解决问题了.

    原文链接如下,转载请注明出处:https://my.oschina.net/leipeng/blog/194533

  • 相关阅读:
    codeblocks 缺少dll libstdc++-6.dll and so on
    gtx 1650 inspiron 1501 pytouch env
    python串口通信
    devops tools
    mosquitto 消息持久化到file
    Mybatis mapper动态代理的原理详解(转)
    Java @Repeatable(转)
    Linux进阶教程丨第10章:管理网络
    CTF-Pwn丨栈溢出入门题目思路解析
    白帽专访丨月神:我的The loner安全团队
  • 原文地址:https://www.cnblogs.com/zzuIvy/p/chat_scrollbar.html
Copyright © 2011-2022 走看看