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

Demo:　　　

　　<!DOCTYPE html>
　　　　<html>
　　　　　　<head>
　　　　　　<meta charset="utf-8">
　　　　　　<title>div添加滑动条</title>
　　　　　　</head>
　　　　<body>
　　　　　　<div style="width: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是一个属性

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

给div"上"滑动条的更多相关文章

  1. DIV+ul+LI实现表格效果以及div带滑动条

    写这个是为了给自己一个好好的笔记,以免下次需要的时候又到处找,费神费事费时费力.开始吧! 1.先看看效果 2.网页代码 <!DOCTYPE html PUBLIC "-//W3C//D ...

  2. 设置DIV隐藏与显示，表格滑动条

    问题描述:         现在希望使用JS设置DIV块的显示与隐藏,当某一个事件触发是,自动显示DIV块,显示表格数据,但是要求表格显示滑动条 问题解决:   (1)DIV块的隐藏与显示 如上所示, ...

  3. 【转】自定义(滑动条)input[type="range"]样式

    1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome:  ...

  4. 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果（精问）

    使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...

  5. HTML5新特性——自定义滑动条（input[type="range"]）

    HTML 4.01 与 HTML5之间的差异 以下 input 的 type属性值是 HTML5 中新增的: color.date.datetime.datetime-local.month.week ...

  6. 原生js拖拽功能制作滑动条实例教程

    拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: ...

  7. 【JavaScript吉光片羽】--- 滑动条

    灯光的亮度控制需要一个滑动条,先借用lamp源码中Bar: var Bar = function (opt) { var defaults = { $id: "", // 进度条d ...

  8. 实现滑动条与表单中的input中的value交互

    最近在写一个考试系统的项目,遇到一些比较有意思的小知识,在这里分享给大家 下面是一个滑动条与input中的value值的交互,即滑动条的颜色会跟随给定input的value值实时变化,虽然表单中的ra ...

  9. 自定义scrollview右侧的滑动条

    在做这个功能之前我其实是拒绝的,为什么这么说呢,因为我怕麻烦啊!(开玩笑的,怕麻烦就不做程序员了) 很久没有写博客,这次刚好项目中有个有趣的东西,想拿出来分享一下,希望能帮到某些小伙伴. 首先说说需求 ...

随机推荐

  1. 基于SpringBoot+Mybatis+AntDesign快速开发平台，Jeecg-Boot 1.1 版本发布

    Jeecg-Boot 1.1 版本发布,初成长稳定版本 导读     平台首页UI升级,精美的首页支持多模式 提供4套代码生成器模板(支持单表.一对多) 集成Excel简易工具类,支持单表.一对多导入 ...

  2. 1024程序员节宅男节日快乐 -- JAVA快速开发平台，JEECG 3.8宅男优化版本发布

    JEECG 3.8 版本发布,系统全面升级,重构上传组件.优化代码生成器机制! 导读   ⊙平台性能优化,系统更稳定,速度闪电般提升 ⊙系统上传组件全面重构,使用plupload组件,解决flash的 ...

  3. list<T>升序、降序

    List<test> list = new List<test> (); var result = list.OrderByDescending(p => p.we).T ...

  4. 面试常问MySQL性能优化问题

    知识综述: [1] MySQL中锁的种类: 常见的表锁和行锁,也有Metadata Lock等等,表锁是对一整张表加锁,分为读锁和写锁,因为是锁住整张表,所以会导致并发能力下降,一般是做ddl处理时使 ...

  5. whereis命令详解

    1.简介: whereis命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和源代码文件(参数-s).如果省略参数,则返回所有信息. 和find相比,whereis ...

  6. ubuntu安装rabbitmq（转）

    查看ubuntu当前版本命令: cat /etc/issue 由于rabbitMq需要erlang语言的支持,在安装rabbitMq之前需要安装erlang,执行命令: sudo apt-get in ...

  7. jquery 事件的触发与绑定

    bind事件绑定: live事件绑定: hover事件绑定: one事件绑定 toggle事件绑定:

  8. mysql,Can 't connect to local MySQL server through socket '/tmp/mysql.sock '(2) "

    # mysql -uroot -pEnter password:ERROR 2002 (HY000): Can't connect to local MySQL server through sock ...

  9. c语言：第一次作业，分支，顺序结构

    1.本章学习总结(2分) 1.1 思维导图 1.2 本章学习体会及代码量学习体会 1.2.1 学习体会 学了几节课的c语言了,因为没自学的原因,跟不上进度.对于c语言现在挺有兴趣的,愿意去花时间去弥补 ...

  10. Linux开始结束ping命令

    ctrl+c可以终止ping ctrl+z可以暂停ping,该暂停只是把进程放到后台去了,使用命令fg可以调出到前台来 通过以下命令可以设置次数: ping -c    10 (次数)  ip(域名) ...