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实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
javascript之Array 数组对象详解
Jun 07 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
Vue.js对象转换实例
Jun 07 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
微信小程序实现图片压缩
Dec 03 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
用最通俗易懂的代码帮助新手理解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+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
原生js实现随机点名
2020/07/05 Javascript
Python守护进程(daemon)代码实例
2015/03/06 Python
python实现的简单抽奖系统实例
2015/05/22 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
Flask-Mail用法实例分析
2018/07/21 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
Django 解决由save方法引发的错误
2020/05/21 Python
Python内置函数property()如何使用
2020/09/01 Python
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
团委竞选演讲稿
2014/04/24 职场文书
药店促销活动总结
2014/07/10 职场文书
婚前协议书范本两则
2014/10/16 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
纪委立案决定书
2015/06/24 职场文书
保姆聘用合同
2015/09/21 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
小学运动会开幕词
2016/03/04 职场文书