zoukankan      html  css  js  c++  java
  • 给div"上"滑动条

    最近做项目时修改一个遗留的bug,大概是这样:有一个聊天窗口,用户聊天内容展现在窗口上。其实这个窗口是一个带滑动条的div,随着聊天内容的添加,滑动条也越来越长了,这不是重点,重点是每次刷新窗口时候,滑动条的内容都是显示前面的内容,可是实际是我们希望聊天内容展示给用户的,应该是最后的内容,这就驱动了一个小功能,如何让滑动条在窗口刷新的时候总是在停留在底端。

        Demo:   

      <!DOCTYPE html>
        <html>
          <head>
          <meta charset="utf-8">
          <title>div添加滑动条</title>
          </head>
        <body>
          <div style="260px;height:60px; overflow:auto; border:1px solid;" id="divContain">
            这里是你要显示的内容 ,怎么说好。人怎么能如此无情尼,哈哈,毕业那年啊,老师都很失望,对我;
            这里是你要显示的内容 ,怎么说好。人怎么能如此无情尼,哈哈,毕业那年啊,老师都很失望,对我;
            这里是你要显示的内容 ,怎么说好。人怎么能如此无情尼,哈哈,毕业那年啊,老师都很失望,对我;
            这里是你要显示的内容 ,怎么说好。人怎么能如此无情尼,哈哈,毕业那年啊,老师都很失望,对我;
            这里是你要显示的内容 ,怎么说好。人怎么能如此无情尼,哈哈,毕业那年啊,老师都很失望,对我;
            这里是你要显示的内容 ,怎么说好。人怎么能如此无情尼,哈哈,毕业那年啊,老师都很失望,对我;
          </div>
                   <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
                   <script type="text/javascript">
                         var divContain = document.getElementById('divContain');
                         //TODO 滚动条滑到底部
                         $('#divContain').scrollTop( divContain.scrollHeight); //.scrollHeight这个是js的属性
                  </script>
                 </body>
             </html>

              没有执行这句js的时候,每次内容刷新老是显示在前头,看到以下哪个滑动条呆在首行没,哪有用户每次发完信息,就滚动到最后查看最新消息的喔

              $('#divContain').scrollTop( divContain.scrollHeight); //.scrollHeight这个是js的属性

              

            执行以上这句代码后,滑动条永远呆在下面了,用户不用手动拉到最后看消息了

            

             divContain.scrollHeight这个很重要,主要是说滑动条的长度.... scrollHeight是一个属性

             哈哈,小功能完成了,收工睡觉撒。

  • 相关阅读:
    SQL联结(Join)的命令详解
    Symbian c++在程序安装时显示一份免责声明
    Effective C++条款11: 为需要动态分配内存的类声明一个拷贝构造函数和一个赋值操作符
    <转>S60系统出错问题汇总
    开发规范C#程序
    Javascript 进行decode编码,C#中进行解码的问题
    IIS7.5 不能访问3.5 wcf 的解决办法
    开发规范总结数据库
    [转载]Linux性能测试 tcpdump命令
    [转载]Linux性能测试 top命令
  • 原文地址:https://www.cnblogs.com/fzczailushang/p/7835267.html
Copyright © 2011-2022 走看看