自接触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. AndroidStudio导入项目一直卡在Building gradle project info最快速解决方案

    AndroidStudio导入项目一直卡在Building gradle project info,实际上是因为你导入的这个项目使用的gradle与你已经拥有的gradle版本不一致,导致需要下载该项 ...

  2. EventBus 优化广播的传播

    需要在onEventMainThread方法上,添加@Subscribe,程序才能执行. http://blog.csdn.net/harvic880925/article/details/40787 ...

  3. 手机版 div拖动

    <!doctype html> <html> <head> <title></title> <script type="te ...

  4. include使用中注意的问题

    发现include文件不必添加,但是一定要放在工程路径下,不然就找不到,或者也可以在文件上写出完整的路径. 可以修改路径为'include "../src/enc_defines.v&quo ...

  5. 【转】c3p0详细配置

      官方文档 : http://www.mchange.com/projects/c3p0/index.html <c3p0-config><default-config>&l ...

  6. java_jdk_JDK版本切换批处理脚本

    我们平时在window上做开发的时候,可能需要同时开发两个甚至多个项目,有时不同的项目对JDK的版本要求有区别,这时候我们可能会在一台电脑上安装多个版本的JDK,如下图所示:

  7. jQuery 的属性

    一.显示和隐藏的属性  hide(隐藏),show(显示) 下面是例子 <script type="text/javascript"> $(document).read ...

  8. highcharts曲线图

    在做项目时,用highcharts做过曲线图,X轴是从后台获取的时间数据,Y轴是从后台获取的Int型数据 1.我的后台数据封装成json格式,数据较多,展示部分数据 2.曲线图的展示 3.前端jsp页 ...

  9. 如何理解反向传播 Backpropagation 梯度下降算法要点

    http://colah.github.io/posts/2015-08-Backprop/ http://www.zhihu.com/question/27239198 待翻译 http://blo ...

  10. c# DESEncrypt 加密、解密算法

    using System; using System.Security.Cryptography; using System.Text; namespace AttendService { publi ...