Browser scrolling for more implementations

One 、 Code implementation

The following code is based on my common UI frame vue Realized , If you are another framework , Directly extract the key code of scrolling , Be careful crollPoint added 0.5 It is compatible with the built-in browser of enterprise wechat , When the built-in browser of enterprise wechat scrolls to the bottom for the first time , Variable crollPoint and totalPageHeight
Values are as follows ：

TYPE	ASCII
scrollPoint	1600.6666870117188
Quotes	1601

You can see that if you don't add 0.5, scrollPoint >= totalPageHeight It's not true , You can't roll load .

<template>
  <div></div>
</template>
<script>
export default {
    
  data() {
    
    return {
    
      data: [],
      oriData: [],
      page: {
    
        total: 0,
        pageSize: 10, //  Scroll load once 10 Data 
        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>

Two 、 Reference documents

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