自接触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. ACM之路（20）—— Splay初探

    由于数据结构上老师讲了AVL树的rotate,然后去学了一下treap和Splay,这些数据结构还真是神奇啊! treap暂时只知道名次树的作用(就是一段动态变化的有序数列,找第K大的元素,用set显 ...

  2. oracle job的写法

    DECLAREX NUMBER;begin sys.dbms_job.submit(job => x, what => 'begindd_income_risk_control;end;' ...

  3. Devexpress WidgetView 使用总结

    效果图: 1.添加DocumentManager控件 2.Convert to WidgetView 3.添加Document,设定ControlTypeName属性,第5步用到 4.添加StackG ...

  4. Java线程基础实例

    概述 Java线程是一个在实战开发中经常使用的基础功能,而在Java中线程相关的类在java.lang和java.util.concurrent里 Thread package thread.base ...

  5. 网络TCp数据的传输设计（黏包处理）

    //1.该片为引用别人的文章:http://www.cnblogs.com/alon/archive/2009/04/16/1437599.html 解决TCP网络传输"粘包"问题 ...

  6. 学习笔记-----Android的View绘制过程

    边看源码边参考别人的博客等,做一下学习笔记. 要了解View的绘制,首先得知道View树的结构:(可以参考http://blog.csdn.net/qinjuning/article/details/ ...

  7. Coursera Machine Learning : Regression 多元回归

    多元回归 回顾一下简单线性回归:一个特征,两个相关系数 实际的应用要比这种情况复杂的多,比如 1.房价和房屋面积并不只是简单的线性关系. 2.影响房价的因素有很多,不仅仅是房屋面积,还包括很多其他因素 ...

  8. 识别有效的IP地址和掩码并进行分类统计

    该题我的想法是把每一个ip看出一个整数,将读取得到的数据一一与给定的ip范围比较即可.另外本题应该注意的地方是scanf读取俩字符串的方法. 代码如下: #include<stdio.h> ...

  9. NC nc5.x笔记(编辑中)

    一.设置卡片界面下 金额字段负数为红色! /** * 设置卡片界面下 金额字段负数为红色! */ private void repaintBodyMoneyColor(){ if(!isListPan ...

  10. 使用Sublime Text3开发AngularJs

    之前的Sublime环境安装插件弄得有点乱,卸载了重新安装: 1. 安装sublime: https://www.sublimetext.com/3 2. 注册: —– BEGIN LICENSE — ...