JavaScript：scroll、client、阻止冒泡

模拟垂直滚动条

红色盒子高度的计算公式：容器的高度 / 内容的高度 * 容器的高度

红色方块移动一像素，内容盒子移动的像素：（内容盒子高度 -容器的高度） / （容器的高度 - 红色盒子的高度）

// 计算倍数 （内容盒子高度 -容器的高度） / （容器的高度 - 红色盒子的高度）* 红色盒子移动的数值

scroll家族

• scrollTop、scrollLeft

scrollTop：被卷去的头部，就是当你滑动浏览网页时网页隐藏在屏幕上方的距离

 

页面滚动效果：

window.onscroll = function( ){
    // 页面滚动语句
}

兼容性写法：

为了更加方便和兼容的获取 scrollTop 和scrollLeft 的值，可以封装自己的类：scroll().top

• scrollTo(x，y)

可以把内容滚动到指定的坐标

格式： scrollTo(xpos，ypos)

xpos：在窗口文档显示区左上角显示文档的x坐标

ypos：在窗口文档显示区左上角显示文档的y坐标

（因为我们网页大部分都没有水平滚动条，所以，x一般设置为0）

例如：返回顶部的小按钮

client家族

可视区域

• offsetWidth： width + padding + border
• clientWidth： width + padding
• scrollWidth： 大小是内容的大小

1）检查屏幕宽度（可视区域）

2）改变窗口事件

• window.onscroll  = function() {}  屏幕滚动事件
• window.onresize = function() {}  窗口改变事件

// onresize 事件会在窗口或框架被调整大小时发生

应用：适配

例如：页面宽度大于960px是背景为红色，小于960大于640为绿色，其余蓝色

3）检查屏幕宽度（分辨率）

clientWidth 返回的是可视区域的大小，浏览器内部的大小

window.screen.width 返回的是电脑的分辨率，跟浏览器没有关系

阻止冒泡

事件冒泡：当一个元素上的时间被触发时，比如说鼠标点击一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡。这个事件从原始元素开始一直冒泡到DOM 树的最上层。

顺序： E 6.0 div -> body -> html -> document

其他浏览器：div -> body -> html -> document -> window

不是所有事件都冒泡，以下事件不冒泡：blur、focus、load、unload

阻止冒泡的方法：

例如：一个盒子，点击除了自己之外的任何一个地方就隐藏

原理：点击自己不算（怎样证明我是我，点击的这个对象id正好和自己一样）

点击空白处就是点击 document