VisibilityObserver
Experimental API for observing the visible box of an element
See Demo
Note: This implementation currently has some serious performance problems when observing many elements or elements deeply nested in the DOM. It's based on
requestAnimationFrame(),getComputedStyle(), andgetBoundingClientRect()which can cause additional "layouts" to happen on every frame. In the future this library could be refactored to useResizeObserver,MutationObserver,IntersectionObserver, and scroll events in order to be much more performant.
Install
npm install --save visibilityobserverUsage
import VisibilityObserver from "visibilityobserver"
let visibilityObserver = new VisibilityObserver((entries) => {
for (let entry of entries) {
if (entry.visibleRect) {
highlightElem.style.display = "block"
highlightElem.style.top = entry.visibleRect.top + "px"
highlightElem.style.left = entry.visibleRect.left + "px"
highlightElem.style.width = entry.visibleRect.width + "px"
highlightElem.style.height = entry.visibleRect.height + "px"
} else {
highlightElem.style.display = "none"
}
}
})
visibilityObserver.observe(divElem)