intersectionObserver Rückruf außerhalb Schwellenwert

Question

versucht zu verstehen Eigenart in intersectionObserver API.

Wenn ein beobachtetes Element teilweise auf dem Bildschirm ist, aber noch nicht die Schwelle definiert in den Optionen erfüllt würde ich den Anruf erwarten, wieder Feuer nicht, aber es tut. Versuchen zu verstehen, warum oder wie man es beim Laden der Seite verhindert.

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); 
}); 

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

Beachten Sie, wie die ersten zwei Abschnitte in sogar animiert werden, obwohl der zweite Abschnitt nicht erfüllt die 0,8-Schwellenwert (Konsolenprotokoll). Die erste Neigung besteht darin, eine intersectionRatio > 0.8 Prüfung hinzuzufügen, aber dies ist eine doppelte Anstrengung. Außerdem ist die Verhältnisangabe verzögert, so dass sie ungenau genug sein könnte, um diese Prüfung nicht zu bestehen.

Answer 1

isIntersecting hängt nicht von Schwellenwerten ab. Es ist true, wenn target Element berührt oder schneidet root Element. Es ist also immer true wenn intersectionRatio > 0.

Wenn ein beobachtetes Element teilweise auf dem Bildschirm ist aber die Schwelle nicht erfüllt hat definiert in den Optionen würde ich den Anruf zurück nicht zu Feuern erwarten, aber es tut.

Im Allgemeinen wird callback aufgerufen, wenn Bedingung intersectionRatio >= your_threshold geändert wird. Daher kann es mit jedem intersectionRatio Wert aufgerufen werden.

Darüber hinaus wird es immer zuerst aufgerufen.

Achten Sie auch darauf, dass 0.8 nur Ihre gewünschte Schwelle ist, aber observer.thresholds[0] ist tatsächlich. Ohne ins Detail zu gehen, könnten sie ein wenig anders sein, z.B. in Chrome.