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实现table单双行不同显示并能单行选中
Jul 25 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
H5上传本地图片并预览功能
May 08 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 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
3种平台下安装php4经验点滴
2006/10/09 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
多广告投放代码 推荐
2006/11/13 Javascript
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
python 获取文件列表(或是目录例表)
2009/03/25 Python
Python 数据结构之旋转链表
2017/02/25 Python
Python 中Pickle库的使用详解
2018/02/24 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
保时捷设计:Porsche Design
2019/03/30 全球购物
前台领班岗位职责
2013/12/04 职场文书
电脑租赁公司创业计划书
2014/01/08 职场文书
大学生应聘求职信
2014/05/26 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
房贷工资证明范本
2015/06/12 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript