Script using Intersection Observer API

IntersectionObserver.js

function setObserver(targetElementsClassName) {

    // vars for Intersection Observer as scroll event
    const ObserverObj = {
        previousY: 0,
        previousRatio: 0,
        loadCount: 0,
        taegetElements: d3.selectAll(targetElementsClassName),
        loadMax: ObserverObj.taegetElements.size(),
    }
    // main
    ObserverObj.taegetElements.each(function (_, i) {
        const target = d3.select(this);

        // create IntersectionObserver object to return callback
        const observer = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                const currentY = entry.boundingClientRect.top;
                const currentRatio = entry.intersectionRatio;
                const isIntersecting = entry.isIntersecting;

                if (ObserverObj.loadCount === ObserverObj.loadMax) {
                    if (currentY < ObserverObj.previousY) {
                        if (currentRatio > ObserverObj.previousRatio && isIntersecting) {
                            // down enter
                            console.log('down enter');
                        } else {
                            // down leave
                            console.log('down leave');
                        }
                    } else if (currentY > ObserverObj.previousY) {
                        if (isIntersecting) {
                            // up leave
                            console.log('up leave');
                        } else {
                            // up enter
                            console.log('up enter');
                        }
                    }
                } else {
                    ObserverObj.loadCount = ObserverObj.loadCount + 1;
                }
            });
        });
        // observe target element
        const options = {
            root: null,
            rootMargin: '0',
            threshold: 0
        }
        observer.observe(target.node(), options);
    });
}

// usage
setObserver(".box");