element-visible

Determine if an element is visible

Install

Install with npm

$ npm i element-visible --save-dev

Usage

This basic check will return true if the entire element is visible to the user (within the visual viewport).

var elementVisible = require('element-visible')
var element = document.getElementById('targetElementId')

if (elementVisible(element)) {
    console.log('I\'m visible')
}

If you'd like to check the certain percent of the element, you can use the following:

var elementVisible = require('element-visible')
var element = document.getElementById('targetElementId')

if (elementVisible(element, 0.5)) { /* at least 50% of its area is in the users viewport */
    console.log('I\'m visible')
}

API

elementVisible(element [, threshold])

true if element is visible and the visible percentage of element is equal or above the threshold

• threshold (default: 1) - if percentage is equal or above this limit the element is considered fully visible

Running tests

Install dev dependencies:

$ npm i -d && npm run test:local

Tested

• IE 6+
• Chrome latest
• Safari latest
• Firefox latest
• iOS 8.1+
• Android 4.0+

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue

License

MIT