stop and then restart makeIntersectionObserver on window height change
I'm switching from the Javascript intersectionObserver to solid's primitive for it because someone mentioned I shouldn't be using imperative code in a declarative framework like solid 🙂
Before I was using
elements.forEach((element) =>
intersectionObserver.observe(element)
)
and
elements.forEach((element) =>
intersectionObserver.unobserve(element)
)
to observe and stop observing where I wanted to.
With the solidJS primitive I have it coded like this:
const { add: intersectionObserver, remove: removeIntersectionObserver } =
makeIntersectionObserver(
[],
(entries) => {
entries.forEach((e) => {
createEffect((prev) => {
const height = size.height
if (height !== prev) removeIntersectionObserver(e.target)
return height
}, size.height)
if (e.isIntersecting) setAllParagraphs(e) //rename to setVisibleParagraphs
})
},
intersectionObserverOptions
)
And then I have an element like this
<p use:intersectionObserver > Hi </p>
With it coded like this the intersection observer works fine and then it stops working when the window height changes(like I want) but I can't get it started again...... Maybe there's a way to conditionally add and remove the attribute on the <p> element0 Replies