滚动事件
scroll
监听页面或元素的滚动
1.可以给添加给页面
window.addEventListener('scroll',function(){})
document.addEventListener('scroll',function(){})
2.可以添加给元素
加载事件
load
-
页面Dom及所有外部资源都加载完毕才触发
-
作用：监听页面的资源或者元素内容是否加载完毕，以便在进行操作的时候，有相应的资源
结论：建议将代码写到load事件中，保证代码是在资源加载完毕的情况下运行
DOMContentLoaded
-
当dom结构解析完毕之后就会触发
-
它会在load之前触发
scroll家族
1.获取宽高
-
获取相对于容器
-
scrollWidth 和 scrollHeight
-
包含：内容宽高+padding 同时去除滚动条宽度
2.获取位置
scrollTop和scrollLeft
//获取当前页面滚动距离
document.addEventListener('scroll',function(){
//ducument.documentElement相当于HTML
cosole.log(ducument.documentElement.scrollTop)
})
-
获取页面滚动出屏幕的距离，主要是关注垂直方向上的距离
-
scrollTop:可以获取垂直方向页面滚动出屏幕的距离（可以取值也可以赋值）
offset家族
1.获取宽高
-
offsetWidth 和 offsetHeight
-
包含：内容宽高+padding+border
2.获取位置
-
获取相对于最近一级有定位的父元素
-
如果没有定位的父容器，则参照文档左上角
-
offsetLeft 和offsetTop（元素离文档顶部的距离）
client家族
1.获取宽高
-
clientWidth 和 clientHeight
-
包含：内容 + padding（不包含边框，也不包含滚动条）
2.获取位置
-
clientLeft:获取左边框的宽度
-
clientTop:获取上边框的宽度
-
window.getCompoutedStyle(元素,null)获取元素的所有样式
resize事件
-
监听屏幕大小的变化 ，当屏幕的大小变化的时候，发自动的触发
-
事件添加给window
