模拟垂直滚动条
红色盒子高度的计算公式:容器的高度 / 内容的高度 * 容器的高度
红色方块移动一像素,内容盒子移动的像素:(内容盒子高度 -容器的高度) / (容器的高度 - 红色盒子的高度)
// 计算倍数 (内容盒子高度 -容器的高度) / (容器的高度 - 红色盒子的高度)* 红色盒子移动的数值
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