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
- If the scale is larger, so no items have a 100% threshold, I want to pick the option with the highest threshold.
- If the scale is smaller, multiple items have a 100% threshold, and I want to pick the latest one.