JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 4
  • Score
    100M100P100Q44331F
  • License ISC

Returns how viewable an element is

Package Exports

  • viewability

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (viewability) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

viewability

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

npm version Bower version devDependency Status

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.

See demo: https://kahwee.github.io/viewability/

Installation

From npm:

npm install --save viewability

From bower:

bower install --save viewability

I want to find out if element is 100% on screen

var v = require('viewability');
var el = document.getElementById('blue-box');
if (v.horizontal(el).value === 0 && v.vertical(el).value === 0) {
  console.log('100% on screen.')
} else if (v.horizontal(el).value > 0 || v.value(el).value > 0) {
  console.log('Part of element in on screen.')
}

Running tests

While viewability has no dependencies, testing uses Karma and jQuery.

npm install
npm test

License

ISC