Javascript实现DIV滚动自动滚动到底部的代码


Posted in Javascript onMarch 01, 2012

查询了一下相关的资料,Div没有自动滚动的属性,只能模拟鼠标的滚动来现实想要的效果。

关键的部分部分在这里:div.scrollTop = div.scrollHeight;

下面是具体实现的精简代码:

<html> 
<body> 
<div id="divDetail" style="overFlow-y:scroll; width:250px;height: 200px;"> 
<table style="border:1px solid; "> 
<tr><td>id</td><td>name</td><td>age</td><td>memo</td></tr> 
<tr><td>000001</td><td>name1</td><td>24</td><td>memomemomemomemomemo</td></tr> 
<tr><td>000002</td><td>name2</td><td>23</td><td>memomemomemomemomemo</td></tr> 
<tr><td>000003</td><td>name3</td><td>23</td><td>memomemomemomemomemo</td></tr> 
<tr><td>000004</td><td>name4</td><td>23</td><td>memomemomemomemomemo</td></tr> 
<tr><td>000005</td><td>name5</td><td>23</td><td>memomemomemomemomemo</td></tr> 
<tr><td>000002</td><td>name2</td><td>23</td><td>memomemomemomemomemo</td></tr> 
<tr><td>000003</td><td>name3</td><td>23</td><td>memomemomemomemomemo</td></tr> 
<tr><td>000004</td><td>name4</td><td>23</td><td>memomemomemomemomemo</td></tr> 
<tr><td>000005</td><td>name5</td><td>23</td><td>memomemomemomemomemo</td></tr> 
</table> 
</div> 
</body> 
<script type="text/javascript" defer> 
var div = document.getElementById('divDetail'); div.scrollTop = div.scrollHeight; 
//alert(div.scrollTop); 
</script> 
</html>

其实,实现是很简单的但是一般很少有这种需求,期间还是走了一些弯路。
Javascript 相关文章推荐
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
JS判断、校验MAC地址的2个实例
May 05 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 #Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 #Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 #Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 #Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 #Javascript
Jquery提交表单 Form.js官方插件介绍
Mar 01 #Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 #Javascript
You might like
关于PHP模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
车间组长岗位职责
2013/12/20 职场文书
入党积极分子思想汇报
2014/01/02 职场文书
生物制药专业求职信
2014/03/11 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
太行山上观后感
2015/06/05 职场文书
班级班风口号大全
2015/12/25 职场文书