README
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
package through CDN: viewability
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