S
SolidJS16mo ago
Mant

IntersectionObserver

Hi, do you have any idea how to do this better? solidjs doesn't seem to like me coding like this.
<div class={styles.App2}
ref={$scroll_container}
>
{() => {
const { add: intersectionObserver, remove } = makeIntersectionObserver([], entries => {
entries.forEach(e => {
if (e.isIntersecting) {
let img = e.target.querySelector('img');
if (img) {
img.src = img.dataset.src ?? "";
}
remove(e.target);
}
});
}, {
rootMargin: '1000px 0px 1000px 0px',
root: $scroll_container,
});
return <>
<div use:intersectionObserver></div>
<div use:intersectionObserver></div>
<div use:intersectionObserver></div>
<div use:intersectionObserver></div>
</>;
}
</div>
<div class={styles.App2}
ref={$scroll_container}
>
{() => {
const { add: intersectionObserver, remove } = makeIntersectionObserver([], entries => {
entries.forEach(e => {
if (e.isIntersecting) {
let img = e.target.querySelector('img');
if (img) {
img.src = img.dataset.src ?? "";
}
remove(e.target);
}
});
}, {
rootMargin: '1000px 0px 1000px 0px',
root: $scroll_container,
});
return <>
<div use:intersectionObserver></div>
<div use:intersectionObserver></div>
<div use:intersectionObserver></div>
<div use:intersectionObserver></div>
</>;
}
</div>
20 Replies
Unknown User
Unknown User16mo ago
Message Not Public
Sign In & Join Server To View
REEEEE
REEEEE16mo ago
This seems unnecessary. Why not just break this out of the JSX
Mant
Mant16mo ago
this is what I use because I need $scroll_container to exist
Erik Demaine
Erik Demaine16mo ago
inside the entries => ... callback?
Mant
Mant16mo ago
would the use:intersectionObserver work if I did this?
Erik Demaine
Erik Demaine16mo ago
I don't think $scroll_container will exist inside the {() => {...}} child; pretty sure the child gets evaluated before the ref gets assigned
Mant
Mant16mo ago
It seems to work though, it activates on scroll, surprisingly.
Erik Demaine
Erik Demaine16mo ago
Glad it works! If there's something surprising, we can try to explain why it works
Mant
Mant16mo ago
Yes, that's why I feel like I'm using a hack but I don't see how to do it properly with the solidjs intersection-observer package.
Erik Demaine
Erik Demaine16mo ago
Did you try:
let $scroll_container
const { add: intersectionObserver, remove } = makeIntersectionObserver([], entries => {
entries.forEach(e => {
if (e.isIntersecting) {
let img = e.target.querySelector('img');
if (img) {
img.src = img.dataset.src ?? "";
}
remove(e.target);
}
});
}, {
rootMargin: '1000px 0px 1000px 0px',
root: $scroll_container,
});
return <div class={styles.App2}
ref={$scroll_container}
>
<div use:intersectionObserver></div>
<div use:intersectionObserver></div>
<div use:intersectionObserver></div>
<div use:intersectionObserver></div>
</div>
let $scroll_container
const { add: intersectionObserver, remove } = makeIntersectionObserver([], entries => {
entries.forEach(e => {
if (e.isIntersecting) {
let img = e.target.querySelector('img');
if (img) {
img.src = img.dataset.src ?? "";
}
remove(e.target);
}
});
}, {
rootMargin: '1000px 0px 1000px 0px',
root: $scroll_container,
});
return <div class={styles.App2}
ref={$scroll_container}
>
<div use:intersectionObserver></div>
<div use:intersectionObserver></div>
<div use:intersectionObserver></div>
<div use:intersectionObserver></div>
</div>
Mant
Mant16mo ago
scroll_container does not exist, so it does not work.
Erik Demaine
Erik Demaine16mo ago
what do you mean it doesn't exist? I added the needed let $scroll_container at the top
Mant
Mant16mo ago
$scroll_container is defined that after the construction of the makeIntersectionObserver it does not exist.
Erik Demaine
Erik Demaine16mo ago
oh, I see I don't think you need root: $scroll_container that's what use:intersectionObserver does
Mant
Mant16mo ago
if I don't use root it activates on the global scroll, and the global scroll doesn't move.
Erik Demaine
Erik Demaine16mo ago
sorry, I think I'm mistaken - yeah ok, I don't see a nicer way to write the code than what you did 🙂 Maybe worth asking in #solid-primitives ...
Mant
Mant16mo ago
Good question I will ask that.
Erik Demaine
Erik Demaine16mo ago
It seems like there's a chicken-and-egg scenario where you need the root to give to makeIntersectionObserver, and you need makeIntersectionObserver to use the directive on the children.
Mant
Mant16mo ago
yes exactly