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 ajaxsubmit上传图片实现代码
Nov 04 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
vue组件name的作用小结
May 23 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
基于JS实现视频上传显示进度条
May 12 Javascript
vue实现评价星星功能
Jun 30 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 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中使用base HTTP验证的方法
2015/04/20 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
jQuery 技巧小结
2010/04/02 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
vue生命周期的探索
2019/04/03 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
Python正则表达式使用范例分享
2016/12/04 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
初一地理教学反思
2014/01/16 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
村党支部书记承诺书
2014/05/29 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
员工评语范文
2014/12/31 职场文书
小学入学感言
2015/08/01 职场文书
仓库管理制度范本
2015/08/04 职场文书
微信小程序基础教程之echart的使用
2021/06/01 Javascript