How do I use Intersection Observer to observe dynamically scaling items?

195 views Asked by At

I have some items with a scale that is dynamically set. I want to use IntersectionObserver to find the item with the highest visible threshold percentage in the viewport.

const options = {
  root: document.getElementById('viewport'),
  threshold: [0, 1],
};
const observer = new IntersectionObserver(onIntersect, options);
const items = document.getElementsByClassName('item');
for (const item of items) {
  observer.observe(item);
}

let activeItem = null;
function onIntersect(entries, observer) {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // I want to determine which item is active by the greatest threshold.
    }
  }
}

My question: How do I determine which item is active

  1. If the scale is larger, so no items have a 100% threshold, I want to pick the option with the highest threshold.
  2. If the scale is smaller, multiple items have a 100% threshold, and I want to pick the latest one.

enter image description here

0

There are 0 answers