前端上拉加载是一个比较常用的功能，网络上有许多下拉加载的插件，但是有时场景不同或项目的需求，并不能都适用，因此需要自己写一个原生的。如下：

css:

    .infinite-scroll-signal {
        width: 0;
        height: 0;
        visibility: hidden;
      }

HTML:

    <!-- 评论列表   列表数据容器 -->
    <div class="comment-lists"></div>
    <div class="infinite-scroll-signal"></div>

js:

        var page = 1   // 起始分页
        // throttle
        var canLoade = true   //节流、防抖
        function getEval() {
          if(canLoade) {
            // 防止频繁触发滚动条事件
            canLoade = false
            setTimeout(() => {
              canLoade = true
            }, 800);
            // 数据请求
            $.ajax({
              type: 'post',
              url: location.origin + '/api/informationEval?id=' + id + '&api_token=' + api_token + '&page=' + page,
              dataType: 'json',
              success: function(res) {
                if (res.status == 200 ) {
                  comments =  res.data.data
                  if (comments.length > 0) {
                    comments.forEach((item, index)=> {
                      $('.comment-lists').append(`
                        <div class="comment-list">
                          <div class="commenter"><img src="${item.member.avatar}" alt=""><span class="comment-name">${item.member.member_name}</span></div>
                          <div class="comment-content">
                            <div class="content-inner">
                                <div class="eval">${item.geval_content}</div>
                                <div class="publish-time">${item.created_at}</div>
                            </div>
                          </div>
                        </div>
                      `)
                    })
                    page += 1
                  }
                };
              }
            })
          }
        }
        //  刚进入页面时加载数据
        getEval()

        // 无限刷新
        
        function checkIsTotalVisible (element) {
          const rect = element.getBoundingClientRect()  //用于获取某个元素相对于视窗的位置集合
          const { 
            top, 
            left, 
            bottom, 
            right 
          } = rect
          console.log(rect)
          const isTotalVisible = (
            top >= 0
            &&
            left >= 0
            &&
            bottom < document.documentElement.clientHeight
            &&
            right < document.documentElement.clientWidth
          )
          return isTotalVisible
        }
         // 监听滚动条
        document.addEventListener('scroll', infinteScroll, false)

        function infinteScroll() {
          
          if (checkIsTotalVisible(document.querySelector('.infinite-scroll-signal'))) getEval();
        }

知识点和原理：

在需要无限加载的列表底部，埋下一个隐藏元素。当不断滑动时，隐藏元素将出现在视窗(viewport)里，也就意味着当前浏览的列表已经到底部了，这时候就需要进行列表加载。

getBoundingClientRect：返回值是一个 DOMRect对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合 。

DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

image.png

空边框盒会被忽略。如果所有的元素边框都是空边框，那么这个矩形给该元素返回的 width、height 值为0，left、top值为第一个css盒子（按内容顺序）的top-left值。

当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。如果你需要获得相对于整个网页左上角定位的属性值，那么只要给top、left属性值加上当前的滚动位置（通过window.scrollX和window.scrollY），这样就可以获取与当前的滚动位置无关的值。