自接触js以来一直使用的是jquery插件，对js的了解甚少，经常容易混淆element.scrollHeight、element.scrollTop等方法。今天对这些方法做出比较。

scrollTop：可以设置或者获取元素的已滚动的上部不可见区域的高度。

<!DOCTYPE html>

<html>

<head>

    <title>测试scrollHeight等的区别</title>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <style type="text/css">

        body{

            padding: 0px;

            margin: 0px;

        }

        #test{

            width: 200px;

            height: 200px;

            border: 1px solid #cccccc;

            overflow-y: auto;

            margin: 300px auto;

        }

        #test p{

            height: 20px;

            margin: 0px;

        }

    </style>

</head>

<body>

    <div id="test"><div><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div></div>

</body>

</html>

上面，有一个id为test的div，里面嵌套一个div和多个p标签。

var element = document.getElementById("test");

    var p = element.getElementsByTagName("p");

    var pL = p.length;

    for(var i=1; i<=pL; i++){

        p[i-1].className = "p" + i;

    }

    element.scrollTop = 300;

    console.log("element's scrollTop = " + element.scrollTop);

第七行代码设置了scrollTop，第八行输出了scrollTop，输出值为： element's scrollTop = 300。蓝色部分为test里层的div所占的区域。

scrollHeight：获取元素的滚动高度。当元素内容高度超出元素高度时，scrollHeight=内容高度+自身高度。

offsetHeight：获取元素的实际高度。element.offsetHeight = element.clientHeight + border-top + border-bottom。

offsetTop：获取元素相对于离自己最近的设置定位的祖先元素的高度，如果没有，则获取相对于页面的高度。

clientHeight：获取元素的可见高度。element.clientHeight = element.height + element.padding-top + element.padding-bottom。

补充：

1：获取元素的不包括padding和border的宽高度，使用js获取css样式的方法获取。

2：获取元素下面可滚动的高度值： element.scrollHeight - element.clientHeight - element.scrollTop;

希望看到这篇文章的同学，多多指出里面的理解不当的地方。有更好的方法，可以与我分享。

scrollHeight、scrollTop等的比较的更多相关文章

  1. JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  2. offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别

    这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离 ...

  3. IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight

    IEdocument.documentElement.scrollHeight  浏览器所有内容高度 ,document.body.scrollHeight  浏览器所有内容高度document.do ...

  4. 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】

    前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...

  5. 关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究

    我是以chrome浏览器做的研究. 先看一段代码: <script> window.addEventListener('DOMContentLoaded',function(){ var ...

  6. scrollHeight, scrollTop, clientHeight

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部

    DTD已声明 IE document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度 docu ...

  8. 一文看懂js中元素的滚动大小（scrollWidth,scrollHeight,scrollTop,scrollLeft）

    滚动大小(scroll dimension) 滚动大小指的是包含滚动内容元素的大小. 以下是与元素滚动内容大小相关的属性: 1. scrollWidth:在没有滚动条的情况下,元素内容的总宽度. 2. ...

  9. JS中的offsetWidth/offsetHeight/offsetTop/offsetLeft、clientWidth/clientHeight/clientTop/clientLeft、scrollWidth/scrollHeight/scrollTop/scrollLeft

    这是一组非常容易弄混的参数!都是描述某个盒子元素的宽度.高度以及上或左的距离偏移量. 1. offsetWidth / offsetHeight(不包括外边距) offsetWidth:返回元素的宽度 ...

  10. 搞懂offsetY、offsetTop、scrollTop、offsetHeight、scrollHeight

    先搞offsetTop,最难懂的就是它了 官方解释:返回当前元素的上边界到它的包含元素的上边界的偏移量,以像素为单位.这真TM坑爹啊!有木有!经过仔细研究查找得出结论:offsetTop是相对于离它最 ...

随机推荐

  1. transform初学习

    1.什么是transform? transform主要用于形变,位移和旋转,可用于动画. p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: jus ...

  2. Percona 5.7安装

    一.从官网下载Percona5.7 地址:https://www.percona.com/downloads/Percona-Server-5.7/LATEST/ 需要注意是服务器的版本.我这里选择的 ...

  3. JS中简单原型的使用

  4. MINA系列学习-IoBuffer

    在阅读IoBuffer源码之前,我们先看Mina对IoBuffer的描述:A byte buffer used by MINA applications. This is a replacement ...

  5. LSD-SLAM深入学习（1）-基本介绍与ros下的安装

    前言 借鉴来自RGB-D数据处理的两种方法-基于特征与基于整体的,同样可以考虑整个图片的匹配,而不是只考虑特征点的…… 一般这种稠密的方法需要很大的计算量,DTAM: Dense tracking a ...

  6. asp.net mvc 自定义身份验证

    1.定义身份实体对象 /// <summary> /// 网站用户实体对象 /// </summary> public class DDTPrincipal : IPrinci ...

  7. windows下调用发送邮件程序项*发送邮件

    #include <windows.h>int _tmain(int argc, _TCHAR* argv[]){ ShellExecute(NULL, _T("open&quo ...

  8. 提交ajax验证用户名是否已存在

    前端页面 <tr> <td class="p_label"><span class="notnull"></span& ...

  9. 内核对TCP REUSEPORT的优化

    Q&A 当有人问起我关于reuseport的一些事的时候,我们的对话基本如下:Q1:什么是reuseport?A1:reuseport是一种套接字复用机制,它允许你将多个套接字bind在同一个 ...

  10. SQL SERVER增加、删除、更改表中的字段名 （详询请加qq：2085920154）

    1. 向表中添加新的字段 alter  table  table_name  add  column_name  varchar2(20) not null 2. 删除表中的一个字段 delete t ...