对于分页需求，分页数据的请求触发十分重要，监听滑动到底的触发也有很多种。

1.IntersectionObserver监听

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

由MDN文档可知，IntersectionObserver可以观察目标元素和父元素可视区域的重叠部分，即可以判断一个元素是否进入可视区域中。
所以可以在分页列表尾部，增加一个占位的被观察元素，当被观察的元素进入父元素可视区域，就是已经滚动到列表容器底部了。同时IntersectionObserver的异步观察可以在需要的时候触发回调执行。
例子：

  <ul class="dataList"><button class="bottomnBtn">到底的介绍</button></ul><script>var page = 1, pageSie = 20;const obverseBottn = new IntersectionObserver((entries) => {//  intersectionRatio 为 0，则目标在视野外，if (entries[0].intersectionRatio <= 0) return;getPaginationData()page += 1;})obverseBottn.observe(document.querySelector(".bottomnBtn"));function getPaginationData(){let fragme = new DocumentFragment();let bottomnBtn = document.querySelector(".bottomnBtn")for (let i = (page - 1) * pageSie; i < page * pageSie; i++) {let li = document.createElement('li');li.innerHTML = i;fragme.append(li);}bottomnBtn.parentNode.insertBefore(fragme, bottomnBtn)}</script>

    .dataList {width: 300px;height: 800px;border: 5px solid black;margin: 0 auto;overflow-y: scroll;list-style: none;}.dataList li {height: 50px;background-color: aquamarine;margin: 10px 0;}.bottomnBtn {width: 100%;height: 50px;background-color: transparent;}