Great example, especially since the so-called "simple example" on MDN is actually really complicated!
I'm still wondering why you are creating a new IntersectionObserver() for each component? In most online examples the observable elements are added to one single IntersectionObserver:
let observer = new IntersectionObserver(...)
let mythings = document.querySelectorAll('thing')
mythings.forEach(thing => {
observer.observe(thing)
})
I could've created a single intersection observer too, but to be honest it doesn't matter too much. If you have hundreds of things you want to fade in - sure, optimize it. I think the way I wrote it is a bit easier to understand from a beginner's point of view.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Great example, especially since the so-called "simple example" on MDN is actually really complicated!
I'm still wondering why you are creating a
new IntersectionObserver()for each component? In most online examples the observable elements are added to one single IntersectionObserver:Hi!
I could've created a single intersection observer too, but to be honest it doesn't matter too much. If you have hundreds of things you want to fade in - sure, optimize it. I think the way I wrote it is a bit easier to understand from a beginner's point of view.