In-viewport detection without event listeners.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
README.md
index.js
package-lock.json
package.json

README.md

vsbl

In-viewport detection without event listeners. 440 bytes gzipped.

Install

npm i vsbl --save

Usage

import vsbl from 'vsbl'

const enter = () => {}
const exit = () => {}

const listener = vsbl(document.getElementById('scroll'))(enter, exit)

listener() // destroy

Options

threshold

Trigger visibility sooner or later than usual.

  • Values below 0.5 will be treated as a percentage of the viewport
  • Values of 0.5 and over will be considered pixel values
const listener = vsbl(node, { threshold: 0.25 })(() => console.log('visible'))

You can optionally include this threshold as an attribute on the element itself:

<div id='scroll' data-threshold='0.25'></div>

License

MIT License © Eric Bailey