给div"上"滑动条
最近做项目时修改一个遗留的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"上"滑动条的更多相关文章
- DIV+ul+LI实现表格效果以及div带滑动条
写这个是为了给自己一个好好的笔记,以免下次需要的时候又到处找,费神费事费时费力.开始吧! 1.先看看效果 2.网页代码 <!DOCTYPE html PUBLIC "-//W3C//D ...
- 设置DIV隐藏与显示，表格滑动条
问题描述: 现在希望使用JS设置DIV块的显示与隐藏,当某一个事件触发是,自动显示DIV块,显示表格数据,但是要求表格显示滑动条 问题解决: (1)DIV块的隐藏与显示 如上所示, ...
- 【转】自定义(滑动条)input[type="range"]样式
1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome: ...
- 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果（精问）
使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...
- HTML5新特性——自定义滑动条（input[type="range"]）
HTML 4.01 与 HTML5之间的差异 以下 input 的 type属性值是 HTML5 中新增的: color.date.datetime.datetime-local.month.week ...
- 原生js拖拽功能制作滑动条实例教程
拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: ...
- 【JavaScript吉光片羽】--- 滑动条
灯光的亮度控制需要一个滑动条,先借用lamp源码中Bar: var Bar = function (opt) { var defaults = { $id: "", // 进度条d ...
- 实现滑动条与表单中的input中的value交互
最近在写一个考试系统的项目,遇到一些比较有意思的小知识,在这里分享给大家 下面是一个滑动条与input中的value值的交互,即滑动条的颜色会跟随给定input的value值实时变化,虽然表单中的ra ...
- 自定义scrollview右侧的滑动条
在做这个功能之前我其实是拒绝的,为什么这么说呢,因为我怕麻烦啊!(开玩笑的,怕麻烦就不做程序员了) 很久没有写博客,这次刚好项目中有个有趣的东西,想拿出来分享一下,希望能帮到某些小伙伴. 首先说说需求 ...
随机推荐
- ajax的4个字母分别是什么意思
Asynchronous JavaScript and XML 的缩写,异步的JavaScript和XML.在不重新加载整个页面的情况下 ,AJAX 与服务器交换数据并更新部分网页.
- Java学习前的一些准备
1.JDK - (Java SE Development Kit) JDK是Java开发所需要的环境,就跟我们想玩某个网游一样,玩之前一定是需要先安装相应的程序包的.那这个JDK就是我们准备登陆Jav ...
- mysql for循环存储过程
DROP PROCEDURE IF EXISTS test_insert; DELIMITER ;; CREATE PROCEDURE test_insert () BEGIN DECLARE i i ...
- python 使用多进程打开多个cmd窗口,并在子进程结束之后关闭cmd窗口
额,我想表达的是使用os.system()打开另一个可执行文件,然后等待其结束,关闭cmd窗口 主要是我突发奇想想装逼; 如果只是用multiprocessing库的多进程,然后输出信息的话,根本没法 ...
- open函数新建文件报错
报错原因很多,我这里只写我遇到的: 给的路径或者文件名中包含了这些字符的:/\:*?"><| 都不行,我说的是Windows平台下的.
- zabbix添加自定义监控项目
在zabbix里添加一个自定义监控项目,简单做个笔记,怕忘了 首先需要定义 zabbix_agentd.conf 中的 UnsafeUserParameters 修改为 UnsafeUserPara ...
- Eclipse使用Maven创建Web时错误：Could not resolve archetype
请检查maven的setting 是否有问题.window->Perfenence->maven->User Settings里 看 Gloal Setting和User Setti ...
- Window下安装Scala出现：此时不应有 \scala\bin\..\lib\jline-2.14.5.jar
scala默认安装到了Program Files (x86)文件夹下.目录中有空格,空格就是导致这个问题的根本原因 把scala安装到其他目录即可 配置scala环境 在环境变量的系统变量里面添加SC ...
- Sprite/MovieClip的Enter_Frame事件，不受addChild/removeChild影响
简单点讲:Sprite或MovieClip对象一旦为其添加了Enter_Frame事件监听,对应的Enter_Frame处理函数将会马上被调用,并一直执行下去(不管你是否将其addChild到显示列表 ...
- 关于有时候JQuery使用.val()赋值失败问题
jQuery中有3个获取元素value值的函数比较相似:attr(), prop(), val(): 具体作用网上比较多就不展示对比过程了,结果就是:prop()和val()都能获取到文本框的实际va ...