IntersectionObserver + scoll监听解决App端无限滚动加载卡顿卡死问题

滚动加载都会存在一个问题就是当我不停加载，数据量过大时，由于页面内容存在过多，页面卡顿甚至内存溢出卡死

解决思路：使用IntersectionObserver监听元素，利用监听回调判断元素进入离开视窗的回调做处理，使用padding代替原先被滚动掉的dom

注意的点：

每页的数据必须超出视窗高度，避免监听上滚动和下滚动同时触发，会造成页面一直抖动

遇到需要做场景还原的情况，例如滚动加载的列表页跳页面看详情再回到当前页需要保留原来的位置的，
可以调用getObjectToStorage方法得到滚动加载的基本信息，
再根据自身的业务场景加一些分页信息一起进行缓存，
再次回到页面时可将原来的缓存信息丢给reviewByStorage方法进行场景还原 

IntersectionObserver在Safari浏览器的兼容不是很好，使用补丁去解决这个问题：
在index.html加上判断是否引入补丁即可

<script type="text/javascript">
  if (!('IntersectionObserver' in window)) {
      var script = document.createElement("script");
      script.src = "https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver";
      document.getElementsByTagName('head')[0].appendChild(script);
  }
</script>

踩过的坑

第一个：在低版本的浏览器虽然可以通过polyfill去加载补丁得到IntersectionObserver对象，
但是有些超低的版本是拿不到isIntersecting（判断观察元素从不相交到相交或者相交到不想交）这个属性的，
例如红米安卓6.0版本，发现这个值是undefined不是布尔值

然后这里为什么要加滚动监听呢？
也是这个低版本手机的问题，手机性能很慢，所以我们在滚动的时候由于是一直在渲染数据，当我们滚动过快，
很容易就超过了一两页数据，这个时候由于dom还没生成，但是已经滚动到padding上去了，
那这个时候就会出现空白页，没办法触发观察，这个时候我给他加了个限制，就是判断滚动的大小，
并且限制它当滚动到超出当前内容视窗时，滚动条定位到最前面那条数据或者是最后面那条数据，
确保能进入dom的观察，
所以这个组件只适用于App端不适用于web端，因为web端一旦拉滚动条就会有卡顿感

再说一下做这个滚动监听的问题，在低版本的浏览器下，scollTo()这个方法是不存在的。。。
这他妈也是个大坑，能解决的是使用scollTop直接等于滚动后的高度，
所以我就开始直接使用了scollTop等于去做这个滚动监听还有场景还原，
麻蛋的发现在新的浏览器失效了，只能用scollTo()这个方法去改滚动条位置，
所以应该是这两个应该是不能共存的，所以我又做了判断，看要使用哪个

上组件代码

<template>
  <div class="scollDiv" id="scollDiv">
    <!-- 全量高度的div -->
    <div class="contentDiv" id="contentDiv" :style="contentStyle">
      <!-- 实际渲染也就是观察的div -->
      <div class="showContent" id="showContent">
        <slot v-for="item in itemList" :item="item"></slot>
      </div>
      <div  style="height:30px;line-height:30px;text-align:center;font-size:14px;color:#666">
        <span v-if="loading">{
  {loadingText}}</span>
        <span v-if="finished">没有了！</span>
      </div>
    </div>
    <!-- 虚拟的dom -->
    <div class="fakeDom" id="fakeDom">
      <slot v-for="ite