Package Exports

visibilityobserver

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (visibilityobserver) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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(), and getBoundingClientRect() which can cause additional "layouts" to happen on every frame. In the future this library could be refactored to use ResizeObserver, MutationObserver, IntersectionObserver, and scroll events in order to be much more performant.

Install

npm install --save visibilityobserver

Usage

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)