I need to detect visibility of a div which is on the viewport. I see that the Intersection Observer Api triggers on visibility change events when the browser is on the screen but doesn't trigger an event when the browser dragged out from screen and dragged in again. Is it possible to detect this kind of action using intersection observer or should I calculate myself using geometric approach?
It seems like in addition to the Intersection Observer API you could use the Page Visibility API which allows developers to react to changes in page visibility via the visibilitychange document event. New document.hidden and document.visibilityChange properties are also available. https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event
document.addEventListener("visibilitychange", function() {
if (document.visibilityState === 'visible') {
backgroundMusic.play();
} else {
backgroundMusic.pause();
}
})