offset, client, scroll

目录：

偏移量offset

即元素在屏幕上占用的所有可见的空间（如display:none为不可见）
由宽、高决定，包括内边距、滚动条、边框大小（不包括外边距）

• offsetHeight，offsetWidth：在垂直、水平方向上占用的空间大小
• offsetLeft、offsetTop：与包含元素offsetParent有关，元素的外边框至包含元素的内边框之间的距离

元素在页面上的偏移量：将offsetTop和offsetLeft与offsetParent的相同属性相加，循环直至根元素。

//元素相对窗口的左偏移function getElementLeft(ele){    var left = ele.offsetLeft;    var cur = ele.offsetParent;    while(cur!==null){        left += cur.offsetLeft;        cur = cur.offsetParent;    }}

注意：

1. offsetPatent不一定与parentNode相等；
2. offset属性是只读的，每次访问均需重新计算，所以应避免重复访问属性。

客户区大小client

即元素内容及其内边距所占据的空间大小（不包括边框、滚动条）

• clientHeight
• clientWidth

//浏览器视口(html或body)的大小(不包括滚动条)function getViewport(){    if(document.comparMode == "BackCompat"){        // IE7以前的版本        return {            width: document.body.clientWidth,            height: document.body.clientHeight        };    }    else {        return {            width: document.documentElement.clientWidth,            height: document.documentElement.clientHeight        };    }}

滚动大小scroll

即包含滚动内容的元素的大小

• scrollWidth，scrollHeight：元素内容的实际大小；
• scrollLeft，scrollTop：被隐藏在内容区域左、上的距离，设置则可改变元素的滚动位置

带有垂直滚动条的页面总高度：document.documentElement.scrollHeight；
不包含滚动条的页面，存在浏览器不一致的问题：

• Firefox：scrollHeight==clientHeight，大小代表文档内容区域的实际尺寸；
• Opera、Safari 3.1及以上、Chrome：scrollHeigh为视口高度，clientHeight为文档内容区域高度；
• IE标准模式：scrollHeight为文档内容区域高度，clientHeight为视口高度

//获取文档的总高度（包括基于视口的最小高度）function getDocSize(){    var docH, docW;    if(document.comparMode == "BackCompat"){        docH = Math.max(document.body.clientHeight,                         document.body.scrollHeight);        docW = Math.max(document.body.clientWidth,                         document.body.scrollWidth);    }    else {        docH = Math.max(document.documentElement.clientHeight,                     document.documentElement.scrollHeight);        docW = Math.max(document.documentElement.clientWidth,                     document.documentElement.scrollWidth);    }}

//回滚到顶部function scrollToTop(ele){    if(ele.scrollTop != 0){        ele.scrollTop = 0;    }}

来自《JavaScript高级程序设计》12.2.3 元素大小