0
296
ViewsEl observador de intersecciones se dispara cuando el elemento está visible (antes de desplazarse)
Estoy tratando de trabajar con la API Intersection Observer. Tengo una función que funciona en mi primera iteración. La lógica básica es que si el usuario se desplaza hacia abajo y agrega o elimina elementos de una cesta, una vez que la cesta está a la vista nuevamente (como está en la parte superior del documento), entonces disparo una llamada a la API.
El problema es que no activará la función antes de desplazarse, quiero activarla si el elemento está visible o vuelve a estar visible después de desplazarse (la segunda parte está funcionando)
Aquí está js original:
var observerTargets = document.querySelectorAll('[id^="mini-trolley"]'); var observerOptions = { root: null, // null means root is viewport rootMargin: '0px', threshold: 0.01 // trigger callback when 1% of the element is visible } var activeClass = 'active'; var trigger = $('button'); var isCartItemClicked = false; trigger.on('click', function() { isCartItemClicked = true; }); function observerCallback(entries, observer) { entries.forEach(entry => { if(entry.isIntersecting && isCartItemClicked){ $(observerTargets).removeClass(activeClass); $(entry.target).addClass(activeClass); isCartItemClicked = false; console.log('isCartItemClicked and in view'); // do my api call function here } else { $(entry.target).removeClass(activeClass); } }); } var observer = new IntersectionObserver(observerCallback, observerOptions); [...observerTargets].forEach(target => observer.observe(target));He actualizado esto para que ahora verifique si el elemento está visible. así que he actualizado:
if(entry.isIntersecting && isCartItemClicked)
a
if((entry.isVisible || entry.isIntersecting) && isCartItemClicked)
Según tengo entendido, el problema es que el observador solo se activa en el desplazamiento, pero la entrada. isVisible es parte de la función de devolución de llamada del observador.
He hecho un JSFIDDLE aquí (que tiene marcado HTML y CSS).
¿Es posible modificar el código? Extrañamente, la página de MDN no menciona la propiedad isVisible, pero es claramente parte de la función.
1 answers
Answer question0
Este es un poco complicado, pero se puede hacer mediante la creación de un parámetro someObserverEntriesVisible que se establece mediante el observerCallback . Con eso en su lugar, podemos definir cómo los activadores de botón deben manejarse por separado de la devolución de llamada del observador para cada entrada que se cruza.
const observerTargets = document.querySelectorAll('[id^="mini-trolley"]'); const observerOptions = { root: null, // null means root is viewport rootMargin: '0px', threshold: 0.01 // trigger callback when 1% of the element is visible }; const activeClass = 'active'; const trigger = $('button'); let isCartItemClicked = false; let someObserverEntriesVisible = null; let observerEntries = []; trigger.on('click', () => { isCartItemClicked = true; if (someObserverEntriesVisible) { console.log('fired from button'); observerCallback(observerEntries, observer, false); } }); function observerCallback(entries, observer, resetCartItemClicked = true) { observerEntries = entries; someObserverEntriesVisible = false; entries.forEach(entry => { someObserverEntriesVisible ||= entry.isIntersecting; if (entry.isIntersecting && isCartItemClicked) { $(entry.target).addClass(activeClass); // add API call here if (resetCartItemClicked) { isCartItemClicked = false; console.log('fired from observer'); } } else { $(entry.target).removeClass(activeClass); } }); } const observer = new IntersectionObserver(observerCallback, observerOptions); [...observerTargets].forEach(target => observer.observe(target)); #content { height: 500px; } .active { background-color: orange; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="mini-trolley">Observer target1</div> <button>Top button</button> <div id="content"></div> <div id="mini-trolley">Observer target2</div> <button>Bottom button</button>