Returns how viewable an element is
npm install viewabilityBrowser package to check if the element is on screen without dependencies. Or you can call it visibility.






No dependencies.
``js`
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.
Both source code are in the gh-pages branch.
Draggable-based example
Timer-based example
- npm: npm install --save viewability
- Direct download the latest version: https://github.com/kahwee/viewability/releases
- jsDelivr CDN:
package through CDN:Loading it directly to the browser with viewability exposed to the window:
`html`
Finding out if the element is 100% on screen and using Common JS:
`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"}
While viewability has no dependencies, testing uses Karma.
`sh``
npm install
npm test
ISC