debug-root-margin.js

/* Usage */

const observer = new IntersectionObserver((entries) => {
    // ...
}, {
    rootMargin: '0px 0px -20% 0px' // Must be all four values
    // ...
});

debugRootMargin(observer);

/* Helper */

const debugRootMargin = (observer) => {
    const margin = observer.rootMargin.split(' ');
    const overlay = document.createElement('div');
    const rect = observer.root?.getBoundingClientRect();
    Object.assign(overlay.style, {
        ...(observer.root ? {
            position: 'absolute',
            top: `calc(${rect.top}px - ${margin[0]})`,
            right: `calc(${window.innerWidth - rect.right}px - ${margin[1]})`,
            bottom: `calc(${window.innerHeight - rect.bottom}px - ${margin[2]})`,
            left: `calc(${rect.left}px - ${margin[3]})`,
        } : {
            position: 'fixed',
            top: `calc(0px - ${margin[0]})`,
            right: `calc(0px - ${margin[1]})`,
            bottom: `calc(0px - ${margin[2]})`,
            left: `calc(0px - ${margin[3]})`,
        }),
        backgroundColor: 'rgba(255 0 0 / 0.1)',
        pointerEvents: 'none',
        zIndex: 9999,
    });
    document.body.appendChild(overlay);
};