JSFiddle - React, Tailwind, and code Playground

HTML

<div id='container'>
    <div id='content'></div>
</div>

CSS

#container{
    width: 200px;
    height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
}

#content{
    height: 2000px;
    background: #000;
}

JavaScript

var images = [
    'image0.png',
    'image1.png',
    'image2.png',
    'image3.png',
    'image4.png',
    'image5.png'
];

var colors = [
    '#000',
    '#200',
    '#400',
    '#600',
    '#800',
    '#a00',
    '#c00',
    '#f00'
];

$("#container").on("scroll", function(){
    var $container = $("#container");
    var $content = $("#content");
    var totalScrollAmount = $content.height() - $container.height();
    var percentScrolled = $container.scrollTop() / totalScrollAmount;
    $content.css({
        background: colors[Math.floor(percentScrolled * colors.length)]
    });
});