VisibilityStats

A simple library to determine if DOM elements are visible in the viewport and statistics about how long elements have been visible / when they were last visible.

This library could be useful for determining which content is most looked at on a page and therefore could be a measure of how good/useful a particular content section is.

Intallation

In the browser:

<script src="visibility-stats.min.js">

Via npm

npm i --save visibility-stats

Usage

Sample HTML

<div id="watch-me"></div>
<div id="watch-me-too"></div>

<script>
// Initialise the library with a DOM query selector to 
// begin tracking the visibily of certain elements
var vs = new VisibilityStats("#watch-me, #watch-me-too")

// return all currently visible elements
vs.getVisibleElements()

// get up to date stats on which elements are visible and how 
// long they have been visible for / when they were last visible
vs.getStats()
</script>

For more examples, see the /examples directory

Build devlopment bundle

yarn build:dev

or to additional watch for changes and rebuild bundle yarn build:dev:watch

Compile production library to dist

yarn build:prod

Run tests (TBD)

yarn test