Am I Visible?
AMIVisible (or simply AMI for close friends) is a dependency-free micro tool (735 bytes min+gz) written in vanilla JavaScript for checking when an element appears or disappears from the viewport.
AMI implements throttling mechanisms in order to not flood the main JS thread on scroll events and also supports event delegation.
Installation
- Run
bower install --save amivisible
- Add the script tag
<script src="bower_components/amivisible/lib/bundle.min.js"></script>
- You are ready to go!
API
AMIVisible.monitor
The main method to start monitoring an element.
AMIVisible.monitor(element, options);
Options
key | type | default | description |
---|---|---|---|
force_process | boolean | false | Checks the element state immediately without waiting for next scroll event |
enable_bubbling | boolean | false | Enabled event bubbling for Event Delegation |
AMIVisible.set
Change the default AMI's internal options.
AMIVisible.set(key, newValue);
Available settings
key | type | default | description |
---|---|---|---|
throttle_window | Number | 90 | The window (in milliseconds) before making a new scroll calculation |
Usage
Basic usage
var element = document.getElementById('fancy-element');
element.addEventListener('appear', function() {
console.log('element appeared on the screen!');
});
element.addEventListener('disappear', function() {
console.log('element vanished from the screen!');
});
AMIVisible.monitor(element);
Advanced usage (Event Delegation)
var element = document.getElementById('fancy-element');
document.body.addEventListener('appear', function(event) {
if(event.target === element) {
console.log('element appeared on the screen!');
}
});
document.body.addEventListener('disappear', function(event) {
if(event.target === element) {
console.log('element vanished from the screen!');
}
});
AMIVisible.monitor(element, {
force_process: true, // immediately checks if the element is visible or not
enable_bubbling: true // bubbles the event, useful for event delegation
});
Known issues
- There is currently no way to stop monitoring an object.
- There is no way to change the scroll parent for specific elements. We can only check for window scroll now.
Compatibility
Tested on Chrome, Firefox and Safari