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 元素大小