1

It makes sense to me that IntersectionObserver is preferred to adding scroll-based event listeners these days. Great.

However, I read here and here that a Proxy offers a more desirable way to do this and that Object.observe is perhaps even obsolete.

After reading about Proxy traps for a while, I still can't get my head around how I would use them in my imaginary use case below - or find any good references for it.

The imaginary use case:

  1. Generate an arbitrary number of divs with random background colours.
  2. Each div gets an IntersectionObserver.
  3. When isIntersecting == true for any of the divs, the body's background colour changes to that of the div.

How would I even begin to think about implementing this using proxies?

Fiddle here. It actually creates an attractive - if counterintuitive - effect.

let numberOfDivs = 5;

function createDiv(divNumber) {

    // set the div's tag name, class name and a unique ID
    let aDiv = document.createElement('div');
    aDiv.className = 'my-divs';
    aDiv.id = 'div' + divNumber;

    // set a random hex bg colour for the div;
    // drops a leading zero 1/16 of the time but it's not material to the example
    aDiv.style.backgroundColor = '#' + Math.floor(Math.random()*16777215).toString(16);

    // append the div to the body
    document.body.appendChild(aDiv);

    // set IntersectionObserver on the div
    let observer = new IntersectionObserver(whatsIn, {threshold: 0.5});
    observer.observe(aDiv);

}

// create the divs

for ( let i = 0; i < numberOfDivs; i++ ) {
    let newDiv = createDiv(i);
}

// examine the IntersectionObserver output whenever isIntersecting changes
function whatsIn(payload) {
    console.log("Is " + payload[0].target.id + " intersecting? " + payload[0].isIntersecting);

    // change background color based on most recent isIntersecting == true
    document.body.style.backgroundColor =
        payload[0].isIntersecting
            ? payload[0].target.style.backgroundColor
            : document.body.style.backgroundColor;
}
ACJ
  • 13
  • 4
  • 1
    If we're talking about [this Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), then I honestly don't see how you can replace an IntersectionObserver with that... – kelsny Sep 22 '22 at 14:15
  • I cant see any reference to proxy in those links – Jaromanda X Sep 22 '22 at 14:15
  • @JaromandaX Second link, in ESDiscuss. They discuss Proxy and Object.observe a little further down. – kelsny Sep 22 '22 at 14:16
  • I see how you could use Proxy now, but that's so much more work than using an IntersectionObserver. Also, it's a lot slower (performance-wise). – kelsny Sep 22 '22 at 14:18
  • @caTS yes it is that Proxy and nor do I. – ACJ Sep 22 '22 at 14:19
  • @JaromandaX I think I have conflated them, as the SO poster in the first link also seems to have done. Thank you both for your input on this. At least my instinct was right, even if I confused IntersectionObserver with Object.observe! Haha – ACJ Sep 22 '22 at 14:22

0 Answers0