滚动事件和加载事件
滚动事件 'scroll'
当页面进行滚动时触发的事件
监听整个页面滚动：
window.addEventListener('scroll',function(){
//执行操作
})
给 window 或 document 添加 scroll 事件 监听某个元素的内部滚动直接给某个元素加即可
加载事件 'load'
加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
window.addEventListener('load',function(){
//执行操作
})
- 给 window 添加 load 事件
元素大小和位置
scroll家族
使用场景： 我们想要页面滚动一段距离，比如100px，就让某些元素 显示隐藏，那我们怎么知道，页面滚动了100像素呢？ 就可以使用scroll 来检测页面滚动的距离~~~
- 获取宽高： 获取元素的内容总宽高（不包含滚动条）返回值不带单位 scrollWidth和scrollHeight
- 获取位置: 获取元素内容往左、往上滚出去看不到的距离 scrollLeft和scrollTop 这两个属性是可以修改的
开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素
offset家族
使用场景： 前面案例滚动多少距离，都是我们自己算的，最好是页面 滚动到某个元素，就可以做某些事。 简单说，就是通过js的方式，得到元素在页面中的位置 这样我们可以做，页面滚动到这个位置，就可以返回 顶部的小盒子显示…
- 获取宽高： 获取元素的自身宽高、包含元素自身设置的宽高、padding , border offsetWidth和offsetHeight
- 获取位置： 获取元素距离自己定位父级元素的左、上距离 offsetLeft和offsetTop 注意是只读属性
client家族
会在窗口尺寸改变的时候触发事件：
- 获取宽高： 获取元素的可见部分宽高（不包含边框，滚动条等） clientWidth和clientHeight
- 获取位置： 获取左边框和上边框宽度 clientLeft和clientTop 注意是只读属性
总结
- 页面滚动事件如何添加？
- scroll
- 监听整个页面滚动给 window 或 document 加
- 加载事件有哪两个？如何添加？
- load 事件
- 监听整个页面资源，给 window 加
- DOMContentLoaded
- 给 document 加,当初始的 HTML 文档被完全加载和解析完成后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
- scrollWidth和scrollHeight是得到元素什么的宽高？
- 内容
- 不包含滚动条
- 被卷去的头部或者左侧用那个属性？是否可以读取和修改？
- scrollTop / scrollLeft
- 可以读取，也可以修改（赋值）
- 检测页面滚动的头部距离（被卷去的头部）用那个属性？ document.documentElement.scrollTop
- offsetWidth和offsetHeight是得到元素什么的宽高？ 内容 + padding + border
- offsetTop和offsetLeft 得到位置以谁为准？ 带有定位的父级 如果都没有则以 文档左上角 为准
- offset家族 获取元素自身大小：包括自身设置的宽高、padding、border 获取元素距离定位父级的左和上距离 只读属性
- client家族 获取元素可见区域的大小 获取元素左、上边框距离 只读属性
- scroll家族 获取元素内容的总大小 获取元素向左向上滚出去看不见的距离 可读写属性
\
