stacjownik/src/mixins/listObserverMixin.ts

import { defineComponent } from 'vue';

export default defineComponent({
  data: () => ({
    observer: null as IntersectionObserver | null,
    observerTarget: null as Element | null,
  }),

  methods: {
    mountObserver(actionFunction: () => void, target: Element) {
      this.observer = new IntersectionObserver((entries) => {
        console.log(entries);
        
        if (entries[0].intersectionRatio > 0.5) actionFunction();
      }, { threshold: 0.2 });

      this.observer.observe(target);
    },

    unmountObserver() {
      if (!this.observerTarget) return;

      this.observer?.unobserve(this.observerTarget);
    },
  },
});