Viewability NPM

viewability

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

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

npm: npm install --save viewability
Direct download the latest version: https://github.com/kahwee/viewability/releases
jsDelivr CDN: <script src="https://cdn.jsdelivr.net/npm/viewability@VERSION/dist/viewability.min.js"></script>

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"}