https://github.com/callmecavs/obzerv

A convenient wrapper around IntersectionObserver for tracking element position relative to the viewport.
https://github.com/callmecavs/obzerv

intersectionobserver

Last synced: 9 months ago
JSON representation

A convenient wrapper around IntersectionObserver for tracking element position relative to the viewport.

• Host: GitHub
• URL: https://github.com/callmecavs/obzerv
• Owner: callmecavs
• Created: 2017-10-09T17:33:20.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-10-10T23:23:26.000Z (over 8 years ago)
• Last Synced: 2025-04-09T18:09:13.777Z (10 months ago)
• Topics: intersectionobserver
• Language: JavaScript
• Homepage:
• Size: 34.2 KB
• Stars: 11
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# obzerv

[![obzerv on NPM](https://img.shields.io/npm/v/obzerv.svg?style=flat-square)](https://www.npmjs.com/package/obzerv) [![obzerv Downloads on NPM](https://img.shields.io/npm/dm/obzerv.svg?style=flat-square)](https://www.npmjs.com/package/obzerv) [![Standard JavaScript Style](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

A convenient wrapper around [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) for tracking element position relative to the viewport.

## Install

```sh

$ npm i obzerv --save

```

## API

### .create(options)

Accepts a config object with `callback` and `offset` properties. Returns an observer instance with a `track` function used to add nodes to the observer.

```javascript

import obzerv from 'obzerv'

// example callback: lazy loading an image

const callback = (node, inview, untrack) => {

  // exit early if image not in viewport

  if (!inview) {

    return

  }

  // set src attribute of the image

  node.setAttribute('src', node.getAttribute('data-src'))

  // stop tracking image, because load attempt has been initiated

  untrack()

}

// create an observer instance

const observer = obzerv.create({

  callback,

  offset: 25

})

// add all .box elements to the observer

Array

  .from(document.querySelectorAll('.box'))

  .forEach(box => observer.track(box))

```

## License

[MIT](https://opensource.org/licenses/MIT). © 2017 Michael Cavalea