JS滚动加载

目录

一、第一种方式

二、第二种方式

---

近期比较忙，有几个大项目，一直忙到昏天暗地，都没时间更新博客，今天终于有时间啦，上正题，今天我们来聊一聊JS的滚动加载。在日常需求中，无数次的会遇到滚动加载的相关需求。

今天，我们呢用原生JS实现滚动加载，我相信原生JS都能实现，使用vue、react等前端框架实现那更不是问题，话不多说，先大致描述一下我们要实现的功能（描述需求，一个好的产品经理是多么的重要）：有一堆要展示的内容，但是我们不一次性展示出来，初始先展示一屏幕高度的内容，当滚动到页面底部时，这个时候一般是去请求接口拿数据，进而展示出来，但是今天，我们就不请求接口了，我们用添加dom元素来替代之。

先摆出页面的静态结构如下：

<style>
    * {
      margin: 0;
      padding: 0;
    }
    #app {
      height: 500px;
      overflow-y: scroll;
    }
    ul {
      list-style: none;
    }
    li {
      background-color: yellowgreen;
      margin-top: 2px;
    }
    li:hover {
      background-color: deeppink;
    }
    .blank {
      height: 1px;
    }
    .lazy {
      text-align: center;
      display: none;
      background-color: deepskyblue;
    }
  </style>

  <div id="app">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
    </ul>
    <p class="blank"></p>
    <p class="lazy">懒加载中...</p>
  </div>

好了，需求描述完毕，下面开始分析：如何知道页面是否已经滚动到底部？这是这个需求的核心部分。

一、第一种方式

有的同学会想到监听scroll事件，然后判断有滚动内容的元素的scrollTop值加上此元素的高度值（clientHeight），然后拿这个计算出来的值与此元素的scrollHeight值进行比较，一般取差值，看是否在某个误差范围内（这个范围一般来说是很小的值），若在范围内，则取请求接口，拿数据，进而展示。

上述这是一般的实现方式，那么，我们来以第一种思路来实现一下：

scrollTop、scrollHeight与clientHeight的重要关系：

关系公式：element.scrollHeight - element.scrollTop === element.clientHeight

　　解释：此公式可以用于判断是否滚动到底。

  <script>
    const app = document.querySelector('#app');
    const ul = app.querySelector('ul');
    const blank = app.querySelector('.blank');
    const lazyDom = app.querySelector('.lazy');
    const NUM = 10;


    function createDom() {
      const fragment = document.createDocumentFragment();
      console.log(fragment, 99);
      const maxNum = +ul.querySelector('li:last-of-type').innerText;
      console.log(maxNum + NUM, 777);
      for (let index = maxNum; index < maxNum + NUM;) {
        const dom = document.createElement('li');
        dom.innerText = ++index;
        fragment.appendChild(dom);
      }
      ul.appendChild(fragment);
    }

    function debounce(fn, delay = 200, context = null) {
      let timer = null;
      return function() {
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          fn.apply(context);
        }, delay);
      }
    }

    function fn() {
      if(Math.abs(app.scrollTop + app.clientHeight - app.scrollHeight) <= 20) {
        lazyDom.style.display = 'block';
        setTimeout(() => {
          createDom();
        }, 500);
      }
      if (this.scrollTop == 0) {
        lazyDom.style.display = 'none';
      }
    }

    app.addEventListener('scroll', debounce(fn, 500));

  </script>

二、第二种方式

第二种方式是监听底部元素<p class="blank"></p>是否进入视口，由于此元素在最底部，而且高度设置了1px，所以基本不影响布局，若此元素进入视口，则说明已经滚动到了最底部。OK，来看代码：

    const observer = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting) {
        lazyDom.style.display = 'block';
        setTimeout(() => {
          createDom();
        }, 500);
      } else {
        lazyDom.style.display = 'none';
      }
    })

    observer.observe(blank);

那么接下来，请允许我简单的介绍一下一个非常重要的API：IntersectionObserver。

IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。

当一个IntersectionObserver对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦IntersectionObserver被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。

上述是MDN官方的解释说明。我们通俗一点来讲，其实此API就是可以判断被监听的元素是否出现或者消失在视口，通过isIntersecting属性的值（true、false）来判断是否在视口。当被监听的元素由在视口不可见变成在视口可见的那一瞬间，此属性由false变为true；当被监听的元素由在视口可见变成在视口不可见的那一瞬间，此属性由true变为false。

要注意的是，只有当被监听的元素出现或消失在视口的那一瞬间，回调函数才会执行。若被监听的元素一直在视口种，则回调函数不会执行，同理，一直消失的话回调函数也不会执行。

以上两种方式就是实现滚动加载的方案，个人比较倾向于第二种，比较简单，代码量也较少，而且性能开销也不大。

本文纯属个人观点，若有不正确之处，望大家不吝赐教。