How to make a webpage that changes color as you scroll down

There are various ways to make a webpage change color as the user scrolls down. One way is to use JavaScript to add an event listener to the window object for the scroll event

Below is an example of a sample webpage that uses the above technique. Please scroll through the webpage to see the effect.

window.addEventListener('scroll', () => {
    /* calculating the vertical scroll position of the page using 
        the `window.scrollY` property */
    const topScroll = window.scrollY;
    
    /* calculating the maximum scroll height of the page by subtracting
        the height of the viewport (innerHeight) from the total height (scrollHeight) */
    const maximumTopScroll = body.scrollHeight - window.innerHeight;
    
    // calculating the scroll fraction
    const scrollFraction = topScroll / maximumTopScroll;
    
    // setting an arbitrary RGB color code as the starting color
    const [red, green, blue] = [173, 216, 230];
    
    // calculating the rgb values based on the scroll fraction
    const bColor = `rgb(${Math.round(red * scrollFraction)}, 
    ${Math.round(green * scrollFraction)}, ${Math.round(blue * scrollFraction)})`;
    
    /* setting the backgroundColor to bColor for smooth color
        transition on page.*/
    body.style.backgroundColor = bColor;
});

Code explanation

Line 4: A constant variable called topScroll is declared and assigned the current vertical scroll position of the webpage.
Line 8: A constant variable called maximumTopScroll is declared and assigned the maximum possible scroll height of the webpage by subtracting the visible height of the webpage (body.scrollHeight) from the total height of the webpage (window.innerHeight).
Line 11: A constant variable called scrollFraction is declared and assigned the fraction of the scroll that represents how much of the page has been scrolled. This scroll fraction will be used to calculate the different RGB values based on the webpage scroll.
Line 14: An arbitrary set of RGB values (light blue, in this case)
Lines 17–18: A constant variable called bColor is declared and assigned the different red, green, and blue values by multiplying the initial values with the current scroll fraction. Math.round function rounds the resulting RGB values to the nearest integers.
Line 22: The backgroundColor (property of the body) is assigned the calculated bColor based on the current scroll position.

How to make a webpage that changes color as you scroll down

Adding an event listener for scroll

Code explanation