Light-weight library to detect when DOM elements become visible and disappear on scroll

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

npm install huntjs --save

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'), {
    enter: function() {
        this.classList.add('visible');
    },
    out: function() {
        this.classList.remove('visible');
    }
});

You don't need to pass both enter and out, pass either one of them or both.

You might have also noticed that inside those methods you can reference the element using 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, pass a persist option as true. Beware you can affect scrolling performance.

hunt(document.getElementsByClassName('element'), {
    enter: 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'), {
    enter: function() {
        this.classList.add('visible');
    },
    persist: false,
    offset: 150
});

If you want some special configuration over one or many elements, data attributes can be used.

<div class="action--element"
  data-hunt-persist="true"
  data-hunt-offset="500"></div>

These custom values will override the ones you pass through the hunt call.

At any time you can shut down the hunting process by calling hunt.clear().