Tiny JavaScript Library For Checking If An Elements Is In Viewport – hunt.js

Preview:

Description:

hunt.js is a lightweight yet robust JavaScript library used for the detection of HTML elements within the browser viewport. So that you can play with CSS if specified elements are scrolled into view.

Basic usage:

Download and include the hunt.min.js from DIST folder and we’re ready to go.

<script src="dist/hunt.min.js"></script>

Use hunt to add/remove CSS classes when a specified element is scrolled into or out of the viewport.

hunt(document.getElementsByClassName('element'), {
    enter: function() {
        this.classList.add('visible');
    },
    leave: function() {
        this.classList.remove('visible');
    }
    
});

More configuration options.

hunt(document.getElementsByClassName('element'), {
    enter: function() {
        this.classList.add('visible');
    },
    leave: function() {
        this.classList.remove('visible');
    },
    // called every time the element appears and disappears from the viewport 
    persist: false,
    // trigger offset in pixels
    offset: 0,
    // interval that hunt events are throttled by in milliseconds
    throttleInterval: 100
});

Changelog:

4.1.0 (08/13/2018)

• Added throttleInterval option