designtips/hunt

Library to detect when DOM elements become visible and disappear on scroll

hunt

Library to detect when DOM elements become visible and disappear on scroll

Install

Download the libary and include it in a script tag or install as an npm package.

npm install huntjs --save

Use

Once you've included the script tag or require the module you need to simply pass an element or a list of them and an object to configure the actions and behaviors.

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

You don't need to pass both in and out, you can pass one either of them or both, of course. You might have also noticed inside those methods you make reference to element that has become visible using the reserved word this, to apply any modification to it.

By default hunt will stop "hunting" or watching for the element once the out method has been executed to improve performance, but if you need these methods to be called every time the element appears and disappears from the viewport you can pass a persist option as true, but beware you can affect scrolling performance.

hunt(document.getElementsByClassName('element'), {
    in: function() {
        this.classList.add('visible');
    },
    out: function() {
        this.classList.remove('visible');
    },
    persist: true
});

In case you need actions to be executed under the hood, you can use the offset option.

hunt(document.querySelector('.action--element'), {
    in: function() {
        this.classList.add('visible');
    },
    persist: false,
    offset: 150
});

Size

This library weighs only 639 bytes minified and gzipped!