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 相关文章推荐
json 入门基础教程 推荐
Oct 31 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
vue模板语法-插值详解
Mar 06 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
Feb 07 Javascript
原生js 实现表单验证功能
Feb 08 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中数据的批量导入(csv文件)
2006/10/09 PHP
社区(php&amp;&amp;mysql)六
2006/10/09 PHP
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
Python调用命令行进度条的方法
2015/05/05 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
化验室技术员岗位职责
2013/12/24 职场文书
小学三年级学生评语
2014/04/22 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
先进工作者推荐材料
2014/12/23 职场文书
怎样写家长意见
2015/06/04 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android