Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript intersectionObserver

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #259778
    markthomes
    Participant

    Trying to understand a quirk in intersectionObserver API.

    If an observed element is partially on screen but has not met the threshold defined in the options I would expect the call back not to fire, but it does. Trying to understand why or how to prevent it on page load.


    function handleIntersect(entries, observer) { entries.forEach(function(entry) { if (entry.isIntersecting) { // Should only fire at ~0.8 console.log(entry, entry.intersectionRatio); entry.target.classList.add('play'); } }); } function createObserver(element) { let observer; const options = { threshold: [0.8] }; observer = new IntersectionObserver(handleIntersect, options); observer.observe(element); } const waypoints = document.querySelectorAll('.section'); waypoints.forEach(waypoint => { createObserver(waypoint); });

    Reduced test case:

    https://codepen.io/WithAnEs/pen/gxZPMK

    Notice how the first 2 sections are animated in even though the second section does not meet the 0.8 threshold (console log). The first inclination is to add an intersectionRatio > 0.8 check, but this is a duplicate effort. Also, the ratio reporting is delayed so could be inaccurate enough not to pass this check.

Viewing 1 post (of 1 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.