https://github.com/jamiebuilds/VisibilityObserver

Experimental API for observing the visible box of an element
https://github.com/jamiebuilds/VisibilityObserver

Last synced: 3 months ago
JSON representation

Experimental API for observing the visible box of an element

• Host: GitHub
• URL: https://github.com/jamiebuilds/VisibilityObserver
• Owner: jamiebuilds
• License: other
• Created: 2020-05-22T21:32:56.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-05-22T23:02:38.000Z (over 4 years ago)
• Last Synced: 2024-07-10T13:33:18.766Z (4 months ago)
• Language: TypeScript
• Homepage: https://jamiebuilds.github.io/VisibilityObserver/
• Size: 255 KB
• Stars: 51
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - VisibilityObserver

README

        


  



# VisibilityObserver

> Experimental API for observing the visible box of an element

## [See Demo](https://jamiebuilds.github.io/VisibilityObserver/)

---

> 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

```sh

npm install --save visibilityobserver

```

## Usage

```js

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)

```