He configurado un sitio pequeño donde el color de fondo cambia a medida que se desplaza. Usé el siguiente código para establecer un atributo data-scroll en el elemento html :

 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();

y el siguiente css para cambiar el color de fondo:

 h1 { /* Add some height to the page */ padding-bottom: 10000000px; } html { background: #f00; filter: hue-rotate(attr(data-scroll)); }

Chrome DevTools me muestra esto , sin información.