offsetHeight,clientHeight,scrollHeight
- offsetHeight: border + padding + content
- clientHeight: padding + content
- scrollHeight: padding + 实际内容高度
在做滚动加载过程中会用到这三个属性，这里面有个小坑，scrollTop只有dom节点才有这个属性，window和document是没有这个属性的，window和document有scrollY这个属性，也是表示滚动了多少距离。
const totalPageHeight = document.body.scrollHeight
const scrollPoint = window.scrollY + window.innerHeight
if(scrollPoint> totalPageHeight) {滚动加载}
除了上面的写法，还可以使用如下写法：
// 浏览器向上滚动的高度
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
// 文档的真实高度
const scrollHeight = document.documentElement.scrollHeight
// 浏览器窗口（文档）的可视高度,就是肉眼可见的那部分全屏高度
const clientHeight = document.documentElement.clientHeight
if (scrollTop + clientHeight > scrollHeight) {}
pageX,clientX,offsetX
- clientX：浏览器的左上角；
- pageX: 文档页面的左上角；浏览器没有滚动条的时候，page的值就和client的值是一致的，此时page的坐标中心点的位置和client的坐标中心点位置宠重合都是浏览器窗口的左上角。
- offsetX：事件源x轴的位置 当我们点击test按钮的时候触发onclick事件，这里test这个按钮就是事件源，所以通过offsetX和offsetY获取的坐标值就是相对于 test按钮这个事件源的；Test按钮自身的宽100px高50px；
getboundingclientrect
Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
如果是标准盒子模型，元素的尺寸等于width/height + padding + border-width的总和。如果box-sizing: border-box，元素的的尺寸等于 width/height。
当滚动位置发生了改变，top和left属性值就会随之立即发生变化。如果你需要获得相对于整个网页左上角定位的属性值，那么只要给top、left属性值加上当前的滚动位置（通过 window.scrollX 和 window.scrollY），这样就可以获取与当前的滚动位置无关的值。
IntersectionObserver判断dom是否出现在可视区域
传统的实现方法是，监听到scroll事件后，调用目标元素（绿色方块）的getBoundingClientRect()方法，得到它对应于视口左上角的坐标，再判断是否在视口之内。这种方法的缺点是，由于scroll事件密集发生，计算量很大，容易造成性能问题。
目前有一个新的 IntersectionObserver API，可以自动"观察"元素是否可见，Chrome 51+ 已经支持。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"。
