JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scrollContent">
    <ul id="assetList">
        <li data-asset-id="15201"></li>
        <li data-asset-id="15202"></li>
        <li data-asset-id="15203"></li>
        <li data-asset-id="15204"></li>
        <li data-asset-id="15205"></li>
        <li data-asset-id="15206"></li>
        <li data-asset-id="15207"></li>
        <li data-asset-id="15208"></li>
        <li data-asset-id="15209"></li>
        <li data-asset-id="15210"></li>
        <li data-asset-id="15211"></li>
        <li data-asset-id="15212"></li>
        <li data-asset-id="15213"></li>
        <li data-asset-id="15214"></li>
        <li data-asset-id="15215"></li>
        <li data-asset-id="15216"></li>
        <li data-asset-id="15217"></li>
        <li data-asset-id="15218"></li>
        <li data-asset-id="15219"></li>
        <li data-asset-id="15220"></li>
        <li data-asset-id="15221"></li>
        <li data-asset-id="15222"></li>
        <li data-asset-id="15223"></li>
        <li data-asset-id="15224"></li>
        <li data-asset-id="15225"></li>
        <li data-asset-id="15226"></li>
        <li data-asset-id="15227"></li>
        <li data-asset-id="15228"></li>
        <li data-asset-id="15229"></li>
        <li data-asset-id="15230"></li>
        <li data-asset-id="15231"></li>
        <li data-asset-id="15232"></li>
        <li data-asset-id="15233"></li>
        <li data-asset-id="15234"></li>
        <li data-asset-id="15235"></li>
        <li data-asset-id="15236"></li>
        <li data-asset-id="15237"></li>
        <li data-asset-id="15238"></li>
        <li data-asset-id="15239"></li>        
    </ul>
</div>
<br>
<a class="next">next</a>
<br>
<a class="prev">prev</a>

<div id="elm"></div>

CSS

#scrollContent { position: relative; width: 660px; height: 375px; overflow-y: scroll; }

ul#assetList { width: 640px; margin: 0; padding: 0; }

ul#assetList li { width: 159px; height: 123px; float: left; margin: 1px 1px 0 0; background: #363636; border-top: 1px #484848 solid; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; list-style: none; }

JavaScript

var first, last;

$('a.next').click(function() {
    var scrollheight = $("#scrollContent").scrollTop();
    $("#scrollContent").animate({scrollTop:scrollheight+375},500,function() {  
        $("#assetList li").each(function() {
            if ($(this).offset().top == 1 && $(this).offset().left == 0) { //added one for the margin
                first = $(this).attr('data-asset-id');
            }
        });
        $("#elm").html('<br />First element: ' + first);
    });
});

$('a.prev').click(function() {
    var scrollheight = $("#scrollContent").scrollTop();
    $("#scrollContent").animate({scrollTop:scrollheight-375},500,function() {
        var Otop = $("#scrollContent").height() - $("#assetList li").height() - parseInt($("#assetList li").css('margin-top'));
        var Oleft = ($("#assetList li").width() + parseInt($("#assetList li").css('margin-right'))) * 3;
        $("#assetList li").each(function() {
            if ($(this).offset().top == Otop && $(this).offset().left == Oleft) {
                last = $(this).attr('data-asset-id');
            }
        });
        $("#elm").html('<br />Last element: ' + last);
    });
});