IntersectionObserver api探坑

题记——滚动的事情还是打好点，然后触发事件比较直观和精密。
然后放假前一天的我还是坚决踩了IntersectionObserverEntry的坑。可能是虽然看懂了用它实现懒加载，但是没有应用过，很心虚的缘故。具体使用参考http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html和MDN。

// option用于初始化配置,callback用于处理结果
new IntersectionObserver(callback, option);

遇到的问题如下:
一, 相邻的元素，会出现第二个元素视觉上不可见但是逻辑上已在滚动视口内的情况。事实证明，在option中没有配置root，并且页面直接相对于视口滚动也就是说root(容器)是浏览器视口，但是观察的元素在上边界还离着视口很远的时候，就已经被判定成相交大于0%了，导致监听有遗漏。这种情况解决方案很方便，缩小root容器，官方API直接给了rootMargin属性，用常用css的margin配置规则:

rootMargin:10px 20px 30px 40px;  //对应上右下左

使用时候发现，负值是缩小容器，正值是扩大容器，和教程中的图片描述相反。
二，如何用callback里的参数判断元素的滚动状态，包括相对于视口的位置、运动趋势等。
1，页面向上滚动的情况，当intersectionRect(相交矩形的信息)的top边在屏幕靠下时并且现在isIntersecting为true是相交状态时，对应向下滚动时候且下一个元素才出现在视口的情况。


在页面向下滚动到上一个元素可视部分到70%时，此时激活该部分a标签，再向下的部分已经有了30%叠交，只凭借之前0%判定是无法继续激活页面的，此时需要多个触发标准，设置option的threshold: [0, 0.75]，当出现的叠加比例大于75%并且相交矩形信息的top边出现在页面顶部时，激活当前a标签。

2，页面向下滚动比较单一，观察到的相交矩形top边在页面上半部分，并且比例>75%,就激活对应a标签。
3，关于如何激活a标签，提前在各个滚动元素上绑定好data-target对应a标签的href，这样通过回调函数的参数.target.dateset获取到href内容，通过选择器选取到对应a标签并设置即可。