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 相关文章推荐
脚本安需导入(装载)的三种模式的对比
Jun 24 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 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实现简易计算器功能
2020/08/28 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
python实现维吉尼亚加密法
2019/03/20 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
python实现图片插入文字
2019/11/26 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
python 高阶函数简单介绍
2021/02/19 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
品质主管的岗位职责
2013/12/04 职场文书
经贸日语专业个人求职信
2013/12/13 职场文书
自我鉴定书面格式
2014/01/13 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
应聘医药销售自荐书范文
2014/02/08 职场文书
我的长生果教学反思
2014/04/28 职场文书
社区班子对照检查材料
2014/08/27 职场文书
单位车辆管理制度
2015/08/05 职场文书
聘任书范文大全
2015/09/21 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript