1.滚动事件和加载事件

1.1滚动事件

• 当页面进行滚动时触发的事件
• 为什么要学？

1. 很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部

• 事件名：scroll
• 监听整个页面滚动
• 给 window 或 document 添加 scroll 事件
• 监听某个元素的内部滚动直接给某个元素加即可

1.2加载事件

• 加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
• 为什么要学？

1. 有些时候需要等页面资源全部处理完了做一些事情
2. 老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到

• 事件名：load
• 监听页面所有资源加载完毕：

给 window 添加 load 事件

• 注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

• 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载

• 事件名：DOMContentLoaded

• 监听页面DOM加载完毕：

• 给 document 添加 DOMContentLoaded 事件

2.元素大小和位置

2.1 scroll家族

获取宽高：

1. 获取元素的内容总宽高（不包含滚动条）返回值不带单位
2. scrollWidth和scrollHeight

获取位置: ++

1. 获取元素内容往左、往上滚出去看不到的距离
2. scrollLeft和scrollTop 这两个属性是可以修改的

开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素

• 注意事项

document.documentElement HTML 文档返回对象为HTML元素

2.2 offset家族

1. 使用场景：

• 前面案例滚动多少距离，都是我们自己算的，最好是页面
• 滚动到某个元素，就可以做某些事。
• 简单说，就是通过js的方式，得到元素在页面中的位置
• 这样我们可以做，页面滚动到这个位置，就可以返回
• 顶部的小盒子显示…

获取宽高：

1. 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
2. offsetWidth和offsetHeight

获取位置：

1. 获取元素距离自己定位父级元素的左、上距离
2. offsetLeft和offsetTop 注意是只读属性

2.3 client家族

获取宽高：

1. 获取元素的可见部分宽高（不包含边框，滚动条等）
2. clientWidth和clientHeight

获取位置：

1. 获取左边框和上边框宽度
2. clientLeft和clientTop 注意是只读属性

会在窗口尺寸改变的时候触发事件：resize

检测屏幕宽度：