An Alpinejs plugin that lets you trigger an expression if the page is being scrolled up or down

x-scrolled.js

// USAGE:
//    x-data="{ direction: 'up' }" x-scrolled.up="direction = 'up'" x-scrolled.down="direction = 'down'"
Alpine.directive(
    'scrolled',
    (_, { modifiers, expression }, { evaluateLater, cleanup }) => {
        const results = evaluateLater(expression);

        let scrollPos = 0;

        const handler = () => {
            const direction =
                document.body.getBoundingClientRect().top > scrollPos
                    ? 'up'
                    : 'down';
            if (modifiers.includes(direction)) {
                results();
            }
            // saves the new position for iteration.
            scrollPos = document.body.getBoundingClientRect().top;
        };

        window.addEventListener('scroll', handler);

        cleanup(() => {
            window.removeEventListener('scroll', handler);
        });
    },
);