浏览器滚动加载更多实现

一、代码实现

下面的代码是基于我常用的UI框架vue实现的，如果你是其他框架，直接提取滚动的关键代码即可，注意 crollPoint 加了0.5是为了兼容企业微信内置浏览器，当企业微信内置浏览器首次滚动到底部的时候，变量 crollPoint 和 totalPageHeight
值如下：

TYPE	ASCII
scrollPoint	1600.6666870117188
Quotes	1601

可以看到如果不加 0.5， scrollPoint >= totalPageHeight 是不成立的，也就无法滚动加载了。

<template>
  <div></div>
</template>
<script>
export default {
  data() {
    return {
      data: [],
      oriData: [],
      page: {
        total: 0,
        pageSize: 10, // 滚动一次加载10条数据
        current: 1,
      },
    };
  },
  mounted() {
    document.addEventListener('scroll', this.scrollMoreData, false);
  },
  destroyed() {
    document.removeEventListener('scroll', this.scrollMoreData, false);
  },
  methods: {
    scrollMoreData() {
      const { total, current, pageSize } = this.page;
      // @var int totalPageHeight
      const totalPageHeight = document.body.scrollHeight;
      // @var int scrollPoint
      const scrollPoint = window.scrollY + window.innerHeight;
      // check if we hit the bottom of the page
      console.log('scrollPoint >= totalPageHeight', scrollPoint, totalPageHeight);
      if (scrollPoint + 0.5 >= totalPageHeight && current * pageSize <= total) {
        console.log('at the bottom');
        this.data = this.data.concat(this.oriData.slice(current * pageSize, pageSize * (current + 1)));
        this.page.current += 1;
      }
    },
  },
};
</script>

<style lang="less" scoped></style>

二、参考文档

Javascript: How to detect if browser window is scrolled to bottom?