编程 Javascript

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实现DIV滚动自动滚动到底部的代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

脚本安需导入(装载)的三种模式的对比

Jun 24 Javascript

悄悄用脚本检查你访问过哪些网站的代码

Dec 04 Javascript

javascript使用中为什么10..toString()正常而10.toString()出错呢

Jan 11 Javascript

使用jQuery避免鼠标双击的解决方案

Aug 21 Javascript

JavaScript必知必会(九）function 说起闭包问题

Jun 08 Javascript

AngularJS入门教程之Cookies读写操作示例

Nov 02 Javascript

Angular5中调用第三方库及jQuery的添加的方法

Jun 07 jQuery

详解JS判断页面是在手机端还是在PC端打开的方法

Apr 26 Javascript

JS中实现浅拷贝和深拷贝的代码详解

Jun 05 Javascript

基于ssm框架实现layui分页效果

Jul 27 Javascript

vant-ui组件调用Dialog弹窗异步关闭操作

Nov 04 Javascript

uniapp引入支付宝原生扫码插件步骤详解

Jul 23 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