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 相关文章推荐
js对图片base64编码字符串进行解码并输出图像示例
Mar 17 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
JQuery解析XML的方法小结
Apr 02 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 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
用文本作数据处理
2006/10/09 PHP
php时区转换转换函数
2014/01/07 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
Yii实现简单分页的方法
2016/04/29 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
js 内存释放问题
2010/04/25 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
Angular路由ui-router配置详解
2018/08/01 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
python3 与python2 异常处理的区别与联系
2016/06/19 Python
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
django中模板的html自动转意方法
2018/05/27 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
Python3并发写文件与Python对比
2019/11/20 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
python数据预处理方式 :数据降维
2020/02/24 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
python time.strptime格式化实例详解
2021/02/03 Python
捷克汽车配件和工具销售网站:TorriaCars
2018/02/26 全球购物
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
培训自我鉴定
2014/01/31 职场文书
搞笑车尾标语
2014/06/23 职场文书
初中成绩单评语
2014/12/29 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL
Python 数据可视化之Matplotlib详解
2021/11/02 Python
canvas实现贪食蛇的实践
2022/02/15 Javascript