Javascript实现DIV滚动自动滚动到底部的代码

作者：iz76mww | 来源：互联网 | 2021-08-10 23:47

一个比较特殊的客户要求，在一个页面用表格显示数据，数据量不是很多，不希望使用浏览器的滚动条，只能在Div中滚动table中的数据，但是有个特殊的要求，就是必须将滚动条自动滚动到底部

查询了一下相关的资料，Div没有自动滚动的属性，只能模拟鼠标的滚动来现实想要的效果。

关键的部分部分在这里：div.scrollTop = div.scrollHeight;

下面是具体实现的精简代码：

代码如下:

 
 idnameagememo
000001name124memomemomemomemomemo
000002name223memomemomemomemomemo
000003name323memomemomemomemomemo
000004name423memomemomemomemomemo
000005name523memomemomemomemomemo
000002name223memomemomemomemomemo
000003name323memomemomemomemomemo
000004name423memomemomemomemomemo
000005name523memomemomemomemomemo

其实，实现是很简单的但是一般很少有这种需求，期间还是走了一些弯路。

推荐阅读

input
javascript入门·表单与表单元素总结（表单验证）

表单提交前的最后验证：通常在表单提交前，我们必须确认用户是否都把必须填选的做了，如果没有，就不能被提交到服务器，这里我们用到表单的formname.submit()看演示，其实这个对于我们修炼道 ... [详细]

蜡笔小新 2023-10-15 18:44:55
client
Google Contacts API未返回输出 - Google Contacts API not returning output

Itwasworkingcorrectly,butyesterdayitstartedgiving401.IhavetriedwithGooglecontactsAPI ... [详细]

蜡笔小新 2023-10-15 16:40:16
header
使用粘性页眉和页脚切换侧栏 - Toggle Sidebar with sticky header and footer

Iwouldliketobeabletohaveasidebarthatcanbetoggledinandoutonabuttonpress.However ... [详细]

蜡笔小新 2023-10-13 12:28:22
web
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法

但有时候，需要当某事件触发时，我们先做一些操作，然后再跳转，这时，就要用JAVASCRIPT来实现这一跳转功能。下面是具体的做法：一：跳转到新页面，并且是在新窗口中打开时:复制代码代码如下:fu ... [详细]

蜡笔小新 2023-10-13 12:25:13
input
用JavaScript实现《铁甲无敌奖门人》“开口中”猜数游戏

JavaScript在常人看来都是门出不了厅堂的小语言，仅管它没有明星语言的闪耀，但至少网页的闪耀还是需要它的，同时它是一门很实用的语言，本人平时就喜欢拿它来写点实用工具或应用，本文演示用JavaSc ... [详细]

蜡笔小新 2023-10-13 09:49:41
input
[学习笔记]JavaScript基础

JavaScript概述1.JavaScript定义JavaScript是Netscape公司开发的一种基于对象和事件驱动的脚本语言。它是弱类型语言，只能由浏览器解释执行。其中：脚本语言：解释运行（ ... [详细]

蜡笔小新 2023-10-13 09:36:45
search
JavaScript实现在页面间传值的方法

JavaScript实现在页面间传值的方法-本文实例讲述了JavaScript实现在页面间传值的方法。分享给大家供大家参考。具体如下：问题如下：在a.html页面中，的 ... [详细]

蜡笔小新 2023-10-13 01:38:28
search
CentOS7.0 U盘刻录工具使用方法详解

本文介绍了使用CentOS7.0 U盘刻录工具进行安装的详细步骤，包括使用USBWriter工具刻录ISO文件到USB驱动器、格式化USB磁盘、设置启动顺序等。通过本文的指导，用户可以轻松地使用U盘安装CentOS7.0操作系统。 ... [详细]

蜡笔小新 2023-12-14 18:55:14
javascript
JavaScript基础---Math对象

该对象中的属性方法和数学有关.abs(x)返回数的绝对值。exp(x)返回e的指数。floor(x)对数进行下舍入。log(x)返回数的自然对数（底为e）。 ... [详细]

蜡笔小新 2023-10-14 20:27:26
function
es6 javascript的Proxy 方法

get()方法用于拦截某个属性的读取操作，如果没有该属性的时候会报一个undefined的，如果结果get处理会返回对应的错误信息varperson{name:张三 ... [详细]

蜡笔小新 2023-10-14 11:04:09
string
[JavaScript] 多数前端工程师都没注意到的一个关于console.log()的坑

[JavaScript]多数前端工程师都没注意到的一个关于console.log()的坑请阅读以下代码并猜测结果：functiontest(){le ... [详细]

蜡笔小新 2023-10-13 19:00:52
function
JavaScript - let和var区别

前提ES5只有函数作用域和全局作用域，var属于ES5。let属于ES6，新增块级作用域。目的是可以写更安全的代码。Theletstatementdeclaresablocks ... [详细]

蜡笔小新 2023-10-13 18:33:54
function
用JavaScript实现的太空人手表

用JavaScript实现的太空人手表-JS写的太空人手表，没有用canvas、svg。主要用几个大的函数来动态显示时间、天气这些。天气的获取用到了AJAX请求。代码中有详细的注释 ... [详细]

蜡笔小新 2023-10-13 17:21:38
function
javascript如何判断值是否为undefined

这篇文章主要介绍“javascript如何判断值是否为undefined”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“ja ... [详细]

蜡笔小新 2023-10-13 12:56:32
search
字符串作为javascript数组的键 - Strings as keys of array in javascript

Whyusingstringsaskeysofarray,consoleisshowingthatarraywithoutthesedeclaredvaluesand ... [详细]

蜡笔小新 2023-10-13 11:19:56

iz76mww

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章

id	name	age	memo
000001	name1	24	memomemomemomemomemo
000002	name2	23	memomemomemomemomemo
000003	name3	23	memomemomemomemomemo
000004	name4	23	memomemomemomemomemo
000005	name5	23	memomemomemomemomemo
000002	name2	23	memomemomemomemomemo
000003	name3	23	memomemomemomemomemo
000004	name4	23	memomemomemomemomemo
000005	name5	23	memomemomemomemomemo