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 相关文章推荐
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
原生js实现验证码功能
Mar 16 Javascript
javaScript封装的各种写法
Aug 14 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 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
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
Terran剧情介绍
2020/03/14 星际争霸
中篇:安装及配置PHP
2006/12/13 PHP
PHP 魔术函数使用说明
2010/05/14 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
javascript实现留言板功能
2020/02/08 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
Python中的CURL PycURL使用例子
2014/06/01 Python
python服务器与android客户端socket通信实例
2014/11/12 Python
python删除字符串中指定字符的方法
2018/08/13 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
python实现各种插值法(数值分析)
2019/07/30 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
python实例化对象的具体方法
2020/06/17 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
python 如何调用 dubbo 接口
2020/09/24 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
校长岗位职责
2013/11/26 职场文书
安全生产标语
2014/06/06 职场文书
八年级英语教学计划
2015/01/23 职场文书
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python