自接触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. Libevent 的多线程操作

    起因是event_base 跨线程add/remove event 导致崩溃或者死循环. 据查:libvent 1.4.x是非线程安全的,要跨线程执行event_add,会有问题.因此传统做法是通过p ...

  2. 解决git无法clone提示443以及配置git代理方法

    git config --global http.proxy 'socks5://127.0.0.1:1080' 设置完成之后再次clone就会成功了(当然前提是你有s's而且在开启的前提下)

  3. Varnish简介

    Varnish介绍: Varnish是一个反向HTTP代理,有时也被称为HTTP的加速器或网络加速器:它存在于真实服务器的前面(可能有多级代理),将来自于客户端的请求中的部分内容存储在自身的内存中,以 ...

  4. myeclipse 控制台打印空指针 ，黏贴控制台sql到plsql有结果集，异常处理

    信用公司框架,不够熟悉. 在完成嗲点登录后,写动态页面是遇到,了问题:myeclipse 控制台打印空指针 ,黏贴控制台sql到plsql有结果集,异常处理. 最后大神给看,在接口实现重写的方法里返回 ...

  5. Tomcat8安装， 安全配置与性能优化

    一.Tomcat 安装 官网:http://tomcat.apache.org/ Tomcat8官网下载地址:http://tomcat.apache.org/download-80.cgi 为了便于 ...

  6. Linux基础-目录结构

    /:根目录 /bin:存放可执行程序(二进制文件) /etc:存放系统或者用户安装的软件所用的一些配置文件 /lib:操作系统运行时候使用的一些基本动态库 /media:自动挂载外设,会将外设挂载到该 ...

  7. PL/SQL安装部署配置（配图解）

    PL/SQL安装部署配置 下载好安装包之后,双击exe程序 双击安装程序,出现如下页面 点击[NEXT],出现如下界面 选择[I Accept...],点击[NEXT],出现如下界面 选择安装路径,点 ...

  8. ajax的表单提交，与传送数据

    ajax的表单提交 $.ajax ({ url: "<%=basePath%>resource/addPortDetectOne.action", dataType: ...

  9. 托管项目到github

    将项目托管到github上面其实很简单,主要有以下几个步骤: 1.注册github账号 2.创建一个新的respository:命名这个respository(假设名字为Test),选择权限 3.创建 ...

  10. 問題排查：DataGridView 資料行下拉選單，資料繫結階段顯示 DataGridViewComboBoxCell 值無效

    可能原因: 1.下拉選單的選項資料繫結晚於 DataGridView 的資料繫結 2.下拉選單的 DataPropertyName 屬性,比 DisplayMember.ValueMember 早賦值 ...