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中JSON.parse的影响概述
Jul 17 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 Javascript
layui使用及简单的三级联动实现教程
Dec 01 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 查找字符串常用函数介绍
2012/06/07 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
js html实现计算器功能
2018/11/13 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
详解js常用分割取字符串的方法
2019/05/15 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
Python中基本的日期时间处理的学习教程
2015/10/16 Python
深入理解python中的atexit模块
2017/03/07 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
手写一个python迭代器过程详解
2019/08/27 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
应届大专毕业生自我鉴定
2014/04/08 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技