레인보우 스크롤

function getScrollPercent() {
    var h = document.documentElement,
        b = document.body,
        st = 'scrollTop',
        sh = 'scrollHeight';
    return (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100;
}

We have to multiply that by 3.6 so that we have the HSL circle complete.

var r = document.querySelector(':root'); 

document.addEventListener('scroll', (e) => {
    let percent = getScrollPercent();
    let hsl = Math.round(percent * 3.6); 
    r.style.setProperty('--rainbowColor', 'hsl(' + hsl + ', 70%, 50%)');
})

:root {
    --rainbowColor: hsl(0, 100%, 50%);
}

h1,h2,strong {
    color: var(--rainbowColor);
}