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•2y ago

Message Not Public

REEEEE•2y ago

This seems unnecessary. Why not just break this out of the JSX

Erik Demaine•2y ago

https://primitives.solidjs.community/package/intersection-observer might be of interest

Mant•2y ago

this is what I use because I need $scroll_container to exist

Erik Demaine•2y ago

inside the entries => ... callback?

Mant•2y ago

would the use:intersectionObserver work if I did this?

Erik Demaine•2y ago

I don't think $scroll_container will exist inside the {() => {...}} child; pretty sure the child gets evaluated before the ref gets assigned

Mant•2y ago

It seems to work though, it activates on scroll, surprisingly.

Erik Demaine•2y ago

Glad it works! If there's something surprising, we can try to explain why it works

Mant•2y 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•2y 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•2y ago

scroll_container does not exist, so it does not work.

Erik Demaine•2y ago

what do you mean it doesn't exist? I added the needed let $scroll_container at the top

Mant•2y ago

$scroll_container is defined that after the construction of the makeIntersectionObserver it does not exist.

Erik Demaine•2y ago

oh, I see I don't think you need root: $scroll_container that's what use:intersectionObserver does

Mant•2y ago

if I don't use root it activates on the global scroll, and the global scroll doesn't move.

Erik Demaine•2y 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•2y ago

Good question I will ask that.

Erik Demaine•2y 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•2y ago

yes exactly

Gaming

Programming

IntersectionObserver