https://github.com/zeusdeux/observe-element-in-viewport

Wrapper around IntersectionObserver to hide away its weirdness and increase ease of usability
https://github.com/zeusdeux/observe-element-in-viewport

intersection-observer intersectionobserver viewport

Last synced: 16 days ago
JSON representation

Wrapper around IntersectionObserver to hide away its weirdness and increase ease of usability

• Host: GitHub
• URL: https://github.com/zeusdeux/observe-element-in-viewport
• Owner: zeusdeux
• Created: 2018-05-13T20:37:00.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-12-12T22:22:39.000Z (almost 5 years ago)
• Last Synced: 2024-10-16T19:24:50.838Z (27 days ago)
• Topics: intersection-observer, intersectionobserver, viewport
• Language: TypeScript
• Size: 90.8 KB
• Stars: 23
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
# observe-element-in-viewport

In browsers that support the Intersection Observer, this library lets you find out when an element of yours is in viewport.

The viewport itself is configurable. It can be the window or any other element in the DOM.

Only requirement is that the element who visibility you want to check _must_ be a child of the element you choose as your

viewport.

## Installation

```js

npm install observe-element-in-viewport

```

or grab it directly from [`unpkg`](https://unpkg.com/) and include it in your html as

```html

```

or directly in your javascript as below which will import the latest version of `observe-element-in-viewport`.

```js

import {

  observeElementInViewport,

  isInViewport

} from 'https://unpkg.com/observe-element-in-viewport?module'

```

#### Note

> For more information on how to get specific versions from `unpkg`, [have a look at their webpage](https://unpkg.com/).

## Usage

### Observing a `target` element

```js

import { observeElementInViewport } from 'observe-element-in-viewport'

// to use window as viewport, pass this option as null

const viewport = document.querySelector('.viewport')

// element whose visibility we want to track

const target = document.querySelector('.target')

// handler for when target is in viewport

const inHandler = (entry, unobserve, targetEl) => console.log('In viewport')

// handler for when target is NOT in viewport

const outHandler = (entry, unobserve, targetEl) => console.log('Not in viewport')

// the returned function, when called, stops tracking the target element in the

// given viewport

const unobserve = observeElementInViewport(target, inHandler, outHandler, {

  // set viewport

  viewport,

  // decrease viewport top by 100px

  // similar to this, modRight, modBottom and modLeft exist

  modTop: '-100px'

  // threshold tells us when to trigger the handlers.

  // a threshold of 90 means, trigger the inHandler when atleast 90%

  // of target is visible. It triggers the outHandler when the amount of

  // visible portion of the target falls below 90%.

  // If this array has more than one value, the lowest threshold is what

  // marks the target as having left the viewport

  threshold: [90]

})

```

### One time query to check if `target` element is in viewport

```js

import { isInViewport } from 'observe-element-in-viewport'

// element whose visibility we want to track

const target = document.querySelector('.target')

// Using window as viewport, it will check the target element's

// visibility and log true or false.

// This function accepts a second parameter which is the same

// as the first parameter to observeElementInViewport fn i.e.,

// the options object.

console.log(await isInViewport(target))

```

## Demo

[Try it here](https://obs.zdx.cat/)