JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div id="background-images" class="background-images">
        <div class="test"></div>
    </div>
</div>

CSS

#background-images {
    height: 4000px;
}
.container {
    border: 1px solid red;
    height: 400px;
    overflow: auto;
}
.test {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 600px;
    height: 600px;
}

#imgs {
    display:none;
}

JavaScript

$(function () {
    var $container = $(".container");
    var $bgImage = $(".test");
    var bgImage = $bgImage.get(0);
    
    $container.scroll(function (event) {
        var position = $container.scrollTop();
        setBgImage(position);
    });

    // preload the given total amount of iamges
    function preload(totalImages) {
        function fetch(url) {
          var image = new Image();
          image.src = url;
        }
        
        for (var i = 0; i < totalImages; i++) {
            fetch(getImgUrl(i));
        }
    }

    preload(36);

    function setBgImage(position) {
        var imageNum;
        var lineCount = 0;

        imageNum = parseInt(position / 100);
        var url = getImgUrl(imageNum);

        bgImage.style.backgroundImage = "url('"+ url +"')";
    }


    function getImgUrl(num) {
        return "http://placehold.it/200x200/&text=" + num;
    }
})