crowd-funder-for-time-pwa/src/components/InfiniteScroll.vue

<template>
  <div ref="scrollContainer">
    <slot />
    <div ref="sentinel" style="height: 1px"></div>
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from "vue-facing-decorator";

@Component
export default class InfiniteScroll extends Vue {
  @Prop({ default: 200 })
  readonly distance!: number;
  private observer!: IntersectionObserver;
  private isInitialRender = true;

  updated() {
    console.log("updated()");
    if (!this.observer) {
      const options = {
        root: null,
        rootMargin: `0px 0px ${this.distance}px 0px`,
        threshold: 1.0,
      };
      this.observer = new IntersectionObserver(
        this.handleIntersection,
        options
      );
      this.observer.observe(this.$refs.sentinel as HTMLElement);
    }
  }

  beforeUnmount() {
    if (this.observer) {
      this.observer.disconnect();
    }
  }

  @Emit("reached-bottom")
  handleIntersection(entries: IntersectionObserverEntry[]) {
    console.log("handleIntersection");
    const entry = entries[0];
    if (entry.isIntersecting) {
      const distance = entry.boundingClientRect.top - entry.rootBounds.top;
      console.log("distance: ", distance);
      console.log("intersectionRatio", entry.intersectionRatio);
      const sentinelPosition = (
        this.$refs.sentinel as HTMLElement
      ).getBoundingClientRect();
      // Access sentinel element's position properties
      const sentinelTop = sentinelPosition.top;
      console.log("sentinelTop", sentinelTop);
      const scrollContainer = (
        this.$refs.scrollContainer as HTMLElement
      ).getBoundingClientRect();
      // Access scrollContainer properties or perform any necessary actions
      console.log("scrollContainerTop", scrollContainer);
      return true;
    }
    return false;
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>