滚动、加载事件，元素大小和位置

滚动、加载事件

滚动事件

当页面进行滚动时触发的事件
很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部

 监听某个元素的内部滚动直接给某个元素加即可

加载事件

加载外部资源（如图片、外联 CSS 和 JavaScript 等）加载完毕时触发的事件

有些时候需要等页面资源全部处理完了做一些事情

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

---

元素大小和位置

scroll家族

使用场景：
我们想要页面滚动一段距离，比如100px，就让某些元素显示隐藏，那我们怎么知道，页面滚动了100像素呢？就可以使用 scroll 来检测页面滚动的距离～

这是内容溢出的情况

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

 

 

offset家族

使用场景：

页面滚动到某个元素，就可以做某些事。

简单说，就是通过 js 的方式，得到元素在页面中的位置这样我们可以做，页面滚动到这个位置，就可以返回顶部的小盒子显示…

获取宽高：

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

获取位置：

获取元素距离自己定位父级元素的左、上距离 ofsetLeft 和 offsetTop （注意是只读属性）

client 家族

获取宽高：

获取元素的可见部分宽高（不包含边框，滚动条等）

clientWidth 和 clientHeight 

获取位置：

获取左边框和上边框宽度

clientLeft 和 clientTop 注意是只读属性