Skip to content

A dependency-free micro tool (735 bytes min+gz) written in vanilla JavaScript, for checking when an element in the DOM appears or disappears from the viewport

Notifications You must be signed in to change notification settings

vinerz/amivisible

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

A dependency-free micro tool (735 bytes min+gz) written in vanilla JavaScript, for checking when an element in the DOM appears or disappears from the viewport

Resources

Stars

Watchers

Forks

Packages

No packages published