Skip to content

kahwee/viewability

Repository files navigation

viewability

Browser package to check if the element is on screen without dependencies. Or you can call it visibility.

Build Status Coverage Status npm version Greenkeeper badge devDependency Status js-standard-style

No dependencies.

var vertical = require("viewability/vertical");
vertical(document.getElementById("blue-box"));
// return {value: 1, state: "EL_IS_WITHIN_VERTICAL_VIEW"}

Use 'viewability/horizontal' for corresponding view.

Demo

Both source code are in the gh-pages branch.

Draggable-based example Timer-based example

Installation

Usage

viewability package through CDN:

Loading it directly to the browser with viewability exposed to the window:

<script src="https://cdn.jsdelivr.net/npm/viewability@latest/dist/viewability.min.js"></script>
<script>
  var v = viewability.vertical(document.getElementById('red-box'));
  console.log(v);
  // return {value: 0.83, state: "EL_IS_WITHIN_VERTICAL_VIEW"}
</script>

Using Common JS:

Finding out if the element is 100% on screen and using Common JS:

var v = require("viewability");
var el = document.getElementById("blue-box");
if (v.isElementOnScreen(el, true)) {
  console.log("100% on screen.");
} else if (v.isElementOnScreen(el)) {
  console.log("Some parts are on screen");
} else {
  console.log("not on screen at all");
}

Use only vertical:

var vertical = require('viewability/vertical');
vertical(document.getElementById('blue-box'));
// return {value: 1, state: "EL_IS_WITHIN_VERTICAL_VIEW"}

Use only horizontal:

var horizontal = require('viewability/horizontal');
vertical(document.getElementById('blue-box'));
// return {value: 1, state: "EL_IS_WITHIN_HORIZONTAL_VIEW"}

Running tests

While viewability has no dependencies, testing uses Karma.

npm install
npm test

License

ISC