JSFiddle - React, Tailwind, and code Playground

HTML

<div id="b1">
    
</div>

CSS

#b1 {
    width: 600px;
    border: 1px solid;
    overflow-x: scroll;
    overflow-y:hidden;
}

#b1 img {
    display: block;
    float:left;
}

JavaScript

// Cache the containing element and it's height
    var b1 = $('#b1'),
        h = b1.height();
    
    // Insert 20 img's - simulating server-side code
    for(var i = 0; i < 7; i++){
        $('<img />', {
            src: 'http://placehold.it/100x100',
            alt: '',
            class: 'hidden',
            width: 100,
            height: 100
            // visibility: hidden to retain it's size
        }).css('visibility', 'hidden').appendTo(b1);
    }
    
    b1.scroll(function(){
        // Loop through only hidden images
        $('img.hidden').each(function(){
            // $(this).position().top calculates the offset to the parent
            // So scrolling is already taken care of here
            if(h > $(this).position().top){
                // Remove class, set visibility back to visible,
                // then hide and fade in image
                $(this).css('visibility', 'visible')
                    .hide()
                    .removeClass('hidden')
                    .fadeIn(300);
            } else {
                // No need to check the rest - everything below this image
                // will always evaluate to false - so we exit out of the each loop
                return false;
            }
        });
        // Trigger once to show the first few images
    }).trigger('scroll');