I have set up a small site where the background color changes as you scroll. I used the following code to set a data-scroll attribute on the html element:

const debounce = (fn) => {
    let frame;

    return (...args) => {
        if (frame)
            cancelAnimationFrame(frame);

        frame = requestAnimationFrame(() => fn(...args));
    };
};

const storeScroll = () => {
    document.documentElement.dataset.scroll = window.scrollY;
};

document.addEventListener('scroll', debounce(storeScroll), { passive: true });

storeScroll();

and the following css to change the background color:

h1 {
    /* Add some height to the page */
    padding-bottom: 10000000px;
}

html {
    background: #f00;
    filter: hue-rotate(attr(data-scroll));
}

Chrome DevTools shows me this, with no information.