一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。

一、滚动事件和加载事件

1.1 滚动事件

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

• 事件名：scroll

• 监听整个页面滚动： 例如：windows.addEventListener('scroll',function(){})

（1）给 window 可替换为 document 添加 scroll 事件

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

let xx = document.querySelector('xx')； xx.add……

1.2 加载事件

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

• 触发原因：有些时候需要等页面资源全部处理完了做一些事情

例如：把 script 写在 head 中，这时候直接找 dom 元素找不到

• 事件名：load

• 监听页面所有资源加载完毕：

• 给 window 添加 load 事件

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

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

• 事件名：DOMContentLoaded

• 监听页面DOM加载完毕：

• 给 document 添加 DOMContentLoaded 事件

二、元素大小和位置

2.1 scroll家族

• 获取宽高：

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

• 获取位置: 获取元素内容往左、往上滚出去看不到的距离，scrollLeft和scrollTop，这两个属性是可以修改
• 开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素

•     document.documentElement ==（html内容） （无单位）
  

2.2 offset家族

• 使用场景：

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

• 获取宽高：

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

• 获取位置：

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

应用：例如京东导航栏的显示（消失与展现）

2.3 client家族

获取宽高：

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

• clientWidth和clientHeight

获取位置：

• 获取左边框和上边框宽度

• clientLeft和clientTop 注意是只读属性