盒子模型的各种高度记录

• height：返回元素内容的高度。（根据是不是怪异盒子模型计算高度）
• offsetheight：它返回的高度是内容高+padding+边框。
• clientHeight：在页面上返回内容的可视高度（不包括边框，外边距或滚动条）。
• scrollHeight：返回整个元素的高度，即不设置高度时的，content高度+padding高度。其实就是展开后的clientHeight

这个content设置100px，但是显示83，因为还有滚动条，滚动条宽度17px。
offsetheight：130 = 内容高100+padding20+边框10。
clientHeight：103 = 内容的可视高度83（即100px-滚动条17px）+ padding20。
scrollHeight：167 =147（内容真实高度）+padding20 = 167。

搞懂scroll （参考链接）

scroll相关属性，其实它描述的是outer的属性：

#outer {
	margin: 100px 50px;
	height: 100px;
	width: 50px;
	padding: 10px 50px;
	overflow: scroll;
} 

<div id="outer">
        <div id="inner"></div>
</div>
<button onclick="toBottom(outer)">返回顶部</button>

//慢慢滚动到底部的实现
function toBottom(ele) {		
		if (ele.scrollTop < ele.scrollHeight - ele.clientHeight) {
			 setTimeout(function(){
					ele.scrollTop++;
					toBottom(ele);
				},100);
		}
}

比如这段代码，inner中间是长list列表，outer是容器，overflow设置为auto或者scroll。
通常觉得滚动是inner长list在往上移动，但是这是错误的，是outer的scrollTop的值在变化。要考虑的是outer的属性。

//判定元素是否滚动到底：
element.scrollHeight - element.scrollTop === element.clientHeight

//返回顶部
element.scrollTop = 0

浏览器尺寸

• window.innerHeight：浏览器窗口的可见高度。包括了滚动条但是不包括border（该窗口的可见高度，如果下面打开开发者模式，这个高度缩小）
• window.outHeight：计算整个浏览器的高度，包括标签页等等的整个浏览器高度，只有改变整个浏览器的高度才会变。
  这两个值是根据浏览器页面大小而变化的。

浏览器窗口的尺寸(就是内容部分，可以看见的部分，不包括工具栏和滚动条)
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的可见高度 
window.innerWidth - 浏览器窗口的可见宽度 

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight 
document.documentElement.clientWidth 
或者 
document.body.clientHeight 
document.body.clientWidth 

兼容所有浏览器：

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;