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);

var containerTop = $container.position().top;

$container.on('scroll', function () {
    // for each item in viewport, which one is in view the MOST?
    var diff = null;
    var num;
    $('.item:in-viewport').each(function(){
        var thisPage = $(this).attr("page");
        var thisTop = $(this).position().top;
        
        if(diff == null){
            diff = Math.abs(containerTop - thisTop);
            num = thisPage;
        } else {
            var temp = Math.abs(containerTop - thisTop);
            if(temp < diff) {
                diff = temp;
                num = thisPage;
            }
        }
    });
    diff = null;
    $cp.html(num);
});