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 相关文章推荐
关于JavaScript的一些看法
May 27 Javascript
JQuery小知识
Oct 15 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
Javascript操作select控件代码实例
Feb 14 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
PHP模板引擎SMARTY
2006/10/09 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
php实现三级级联下拉框
2016/04/17 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
Python中with及contextlib的用法详解
2017/06/08 Python
python实现ID3决策树算法
2018/08/29 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
Python内存管理实例分析
2019/07/10 Python
python中dict使用方法详解
2019/07/17 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
python中pivot()函数基础知识点
2021/01/03 Python
大学生找工作推荐信范文
2013/11/28 职场文书
护理个人求职信范文
2014/01/08 职场文书
个人收入证明范本
2014/01/12 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
骨干教师申报材料
2014/12/17 职场文书
2016春季运动会前导词
2015/11/25 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
css3 选择器
2022/05/11 HTML / CSS