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" href="#">next</a>
<br>
<a class="prev" href="#">prev</a>

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 firstVisibleLiTop = $("#assetList").find('li:eq(0)').position().top;
var lastVisibleLiTop = $("#assetList").find('li:eq(11)').position().top;
$('a.next').click(function() {
    var scrollheight = $("#scrollContent").scrollTop();
    var $container = $("#assetList"),
        $items = $container.children("li");
    $("#scrollContent").animate({
        scrollTop: scrollheight + 375
    }, 500, function() {

        var targetLi;
        for (var i = 0, length = $items.length; i < length; i++) {
            var targetLi = $items.eq(i),
                top = targetLi.position().top;
            if (firstVisibleLiTop == top) {
                break;
            }
        }
        console.log(targetLi.attr('data-asset-id'));

    });
});

$('a.prev').click(function() {
    var scrollheight = $("#scrollContent").scrollTop();
     var $container = $("#assetList"),
        $items = $container.children("li");
    $("#scrollContent").animate({
        scrollTop: scrollheight - 375
    }, 500, function() {
       var targetLi;
        console.log(lastVisibleLiTop);
        for (var i = 0, length = $items.length; i < length; i++) {
            var targetLi = $items.eq(i),
                top = targetLi.position().top;
            if (lastVisibleLiTop == top) {
                targetLi = $items.eq(i+3);
                break;
            }
        }
        console.log(targetLi.attr('data-asset-id'));
    });
});