JSFiddle - React, Tailwind, and code Playground

by desCodLov

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

$('a.next').click(function() {
    var scrollheight = $("#scrollContent").scrollTop();
    $("#scrollContent").animate({scrollTop:scrollheight+375},500,function() {  
        // get "data-asset-id" of first visible element in viewport
        
    });
});

$('a.prev').click(function() {
    var scrollheight = $("#scrollContent").scrollTop();
    $("#scrollContent").animate({scrollTop:scrollheight-375},500,function() {
        // get "data-asset-id" of last visible element in viewport
        
    });
});