JSFiddle - React, Tailwind, and code Playground

HTML

<h1>YEAH SANDWICHES</h1>

<div id="pics">
    <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" />
    <br />
    <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" />
    <br />
    <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" />
    <br />
    <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" />
    <br />
    <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" />
    <br />
    <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" />
    <br />
    <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" />
    <br />
    <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" />
    <br />
    <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" />
    <br />
    <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" />
    <br />
    <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" />
    <br />
    <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" />
    <br />
    <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" />
    <br />
    <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" />
    <br />
    <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" />
    <br />
</div>

CSS

.box {
    background:red;
    width:10px;
    margin:10px;
}
.line {
    background:blue;
    width:10px;
    margin:10px;
}
#pics{
    overflow:scroll;
    height:500px
}

JavaScript

jQuery(function ($) {
    $('#pics').bind('scroll', function () {
        console.log($(this).scrollTop() + $(this).innerHeight())
        if ($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
            alert('end reached');
        }
    })
});