JavaScript-2-5：scroll、client、阻止冒泡
1、模拟垂直滚动条：
红色盒子高度的计算公式：
容器的高度 / 内容的高度 * 容器的高度
红色方块移动一像素，内容盒子移动的像素：
（内容盒子高度 -容器的高度） / （容器的高度 - 红色盒子的高度）
// 计算倍数
（内容盒子高度 -容器的高度） / （容器的高度 - 红色盒子的高度）* 红色盒子移动的数值
2、scroll家族：
滚动的
1）scrollTop、scrollLeft
scrollTop：被卷去的头部，就是当你滑动浏览网页时网页隐藏在屏幕上方的距离
页面滚动效果：
window.onscroll = function( ){
页面滚动语句
}
兼容性写法：
为了更加方便和兼容的获取 scrollTop 和scrollLeft 的值，可以封装自己的类：
scroll().top
2）scrollTo(x，y)
可以把内容滚动到指定的坐标
格式： scrollTo(xpos，ypos)
xpos：在窗口文档显示区左上角显示文档的x坐标
ypos：在窗口文档显示区左上角显示文档的y坐标
（因为我们网页大部分都没有水平滚动条，所以，x一般设置为0）
eg：返回顶部的小按钮
3、client家族：
可视区域
offsetWidth： width + padding + border
clientWidth： width + padding
scrollWidth： 大小是内容的大小
1）检查屏幕宽度（可视区域）
2）window.onresize 改变窗口事件
window.onscroll = function() {} 屏幕滚动事件
window.onresize = function() {} 窗口改变事件
// onresize 事件会在窗口或框架被调整大小时发生
要求：适配
eg：页面宽度大于960px是背景为红色，小于960大于640为绿色，其余蓝色
3）检查屏幕宽度（分辨率）
clientWidth 返回的是可视区域的大小，浏览器内部的大小
window.screen.width 返回的是电脑的分辨率，跟浏览器没有关系
4、阻止冒泡：
事件冒泡：当一个元素上的时间被触发时，比如说鼠标点击一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡。这个事件从原始元素开始一直冒泡到DOM 树的最上层。
顺序： E 6.0 div -> body -> html -> document
其他浏览器 div -> body -> html -> document -> window
不是所有事件都冒泡，以下事件不冒泡：blur、focus、load、unload
阻止冒泡的方法：
案例：一个盒子，点击除了自己之外的任何一个地方就隐藏
原理：点击自己不算（怎样证明我是我，点击的这个对象id正好和自己一样）
点击空白处就是点击 document