Trigger IntersectionObserver before in view

Question

I'm trying to do a simple infinite scroller, but I really can't get it to trigger BEFORE the footer on the page is visible. Is it possible?

I thought setting the rootMargin would do it, but the observer function does not seem to get fired.

I'm using VueJS. Here is part of the footer component:

      mounted () {
        this.observer = new IntersectionObserver(this.handleIntersect, {
          root: null,
          rootMargin: '500px 0px',
          threshold: 0,
        })
        this.observer.observe(this.$el)
      },

      destroyed () {
        this.observer?.disconnect()
      },

      methods: {
        handleIntersect ([entry]) {
          console.log('entry:', entry.boundingClientRect.top)
        }
      },

Answer 1

I couldn't figure out a way to do this, so I worked around it by making the element position:relative and adding an element position:absolute top:-500px left:0 bottom:-500px right:0 and putting the IntersectionObserver on that instead

<div class="position:relative">
    <div style="position:absolute;top:-500px;left:0;bottom:-500px;right:0;transform:scale(150%);pointer-events:none;"></div>
    … content
</div>