It's my first time that i use IntersectionObserver and i followed this doc https://www.netguru.com/codestories/infinite-scroll-with-vue.js-and-intersection-observer . But I'm blocked because of this error
[Vue warn]: Error in mounted hook: "TypeError: Failed to construct 'IntersectionObserver': The provided value is not of type '(Element or Document)'"
this is my trigger component
<template>
<span ref='trigger'></span>
</template>
<script>
export default {
props:{
options:{
type: Object,
default: () => ({
root: 0,
threshold: "0",
})
}
},
data(){
return{
observer : null
}
},
mounted(){
this.observer = new IntersectionObserver( entries => {
this.handleIntersect(entries[0]);
}, this.options);
this.observer.observe(this.$refs.trigger);
},
destroyed(){
this.observer.disconnect();
},
methods:{
handleIntersect(entry){
if (entry.isIntersecting) this.$emit("triggerIntersected");
}
}
}
</script>
How can i fix this?(thanks)
You've changed the default
of options
from:
default: () => {
return {
root: null,
threshold: "0"
};
}
to:
default: () => ({
root: 0,
threshold: "0"
})
But if we look into lib.dom.d.ts
, here's the interface for IntersectionObserver options object:
interface IntersectionObserverInit {
root?: Element | null;
rootMargin?: string;
threshold?: number | number[];
}
When root
is null
or undefined
, the IntersectionObserver
defaults to the viewport element.
So change it back to null
and it will work.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With