前端手写(二十四)——手写滚动加载

一、写在前面
滚动加载在前端中的使用场景：比如说，用户浏览电商网站的时候，我们肯定上来不能加载全部的数据，因为我们需要考虑到如果用户不访问后面的数据，我们加载就没有任何的意义。此时我们就可以使用滚动加载，也就是当用户滚动到最后面的时候，在进行加载另外的数据。
二、简单的手写

    window.addEventListener('scroll', function () {
      // 这里拿到滚动到顶部不可见的高度
      let scrollTop = document.documentElement.scrollTop
      // 这里拿到的是屏幕的高度
      let clientHeight = document.documentElement.clientHeight
      // 这里拿到的是这个滚动区域的高度
      let scrollHeight = document.documentElement.scrollHeight
      if (scrollTop + clientHeight >= scrollHeight) {
        console.log('加载到最低点，此时在进行处理相应的逻辑')
      }
    })

这里我们需要理解三个属性，一个是scrollTop属性，表示已经滚动到顶部额距离。
scrollHeight:表示整个滚动区域的高度。
clientHeight:表示我们可以区域的高度。