JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.appelsiini.net/download/jquery.viewport.js"></script>
Current page: <div id="cp"></div>
<div id="container">
    
</div>

CSS

#container{
    height: 500px;
    width:500px;
    border: 1px solid black;
    overflow:auto;
}

.item {
    
    height: 475px;
    background-color: red;
    width: 80%;
    margin-right:auto;
    margin-left:auto;
    margin-top: 5px;
    margin-bottom: 5px;
        
}

JavaScript

var $cp = $("#cp");
var $container = $("#container");

$cp.html("1");

var s = "";
for(var i=1; i < 10; i++){
    s += "<div class=\"item\" page=" + i + ">" + i + "</div>";
}

$container.append(s);

$container.off('scroll').on('scroll', function () {
    $cp.html($('.item:in-viewport:first').attr("page"));
});