scroll-sniffer^.js

How to use

npm install scroll-sniffer

It's also available here https://unpkg.com/scroll-sniffer

Use a shared class across all the elements you want to track, use unique classes to add event listeners to these elements if you want to do different things when they're triggered.

    <!-- Our shared class is ".listen" -->
    <div class="unique-item-one listen"></div>
    <div class="unique-item-two listen"></div>
            

    import ScrollSniffer from "scroll-sniffer";
    
    const listener = new ScrollSniffer(".listen");
    listener.listen();

    const uniqueItemOne = document.querySelector('.unique-item-one');
    uniqueItemOne.addEventListener("Scroll:in", () => { /* Do something */ });

    const uniqueItemTwo = document.querySelector('.unique-item-two');
    uniqueItemTwo.addEventListener("Scroll:in", () => { /* Do something else */ });
            

Both unique items have access to the scroll events because they share the ".listen" class!

Here's the list of the events:

    /** When the element reaches the edge of the viewport, either
    ** in our out. These don't care if it's the top of the screen
    ** or the bottom */

    element.addEventListener("Scroll:in");
    element.addEventListener("Scroll:out");

    /** When the element has completely disappeared from the viewport */

    element.addEventListener("Scroll:allIn");
    element.addEventListener("Scroll:allOut");

    /** Append the side of the viewport if you'd like to differentiate */

    element.addEventListener("Scroll:in:top");
    element.addEventListener("Scroll:out:top");
    element.addEventListener("Scroll:allIn:top");
    element.addEventListener("Scroll:allOut:top");

    element.addEventListener("Scroll:in:bottom");
    element.addEventListener("Scroll:out:bottom");
    element.addEventListener("Scroll:allIn:bottom");
    element.addEventListener("Scroll:allOut:bottom");
            

As well as tracking elements, there are a number of helpful document event listeners.

Note that if you JUST want to use these, don't pass a selector to the class so it won't listen for any specific elements.

Again note, these events are dispatched to the document.

    /** When you want to determine whether the user is scrolling up or down.
    ** All of these events only fire once each time the condition changes,
    ** so you can safely run a function from them without it continously firing
    ** as they scroll.
    */

    document.addEventListener("Scroll:up");
    document.addEventListener("Scroll:down");

    /** When you want to determine if the viewport is at the top of the page or not. */

    // If you care about IE support:
    document.addEventListener("Scroll:atTop");
    document.addEventListener("Scroll:notAtTop");

    // Or, a more modern listener:
    document.addEventListener("Scroll:atTop?", (e) => {
        const {atTop} = e.detail;
        // atTop is either True or False
    });

    /** When you want to determine if the viewport is at the bottom of the page or not. */
    
    // If you care about IE support:
    document.addEventListener("Scroll:atBottom");
    document.addEventListener("Scroll:notAtBottom");

    // Or, a more modern listener:
    document.addEventListener("Scroll:atBottom?", (e) => {
        const {atBottom} = e.detail;
        // atBottom is either True or False
    });

                

I hope you find these helpful!