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

AMIVisible.set

Change the default AMI's internal options.

AMIVisible.set(key, newValue);

Available settings

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