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)
}
},
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>