Tenho uma lista de polegares em uma div rolável, animada com o botão próximo / anterior. Cada clique no botão "próximo" deve corresponder ao atributo do primeiro elemento visível. Cada clique no botão "prev" deve fornecer o atributo do último elemento visíve

Realmente não sei como resolver isso matematicamente, porque a distância de rolagem é variável quando a lista termina. Alguém por favor pode me ajudar?

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>
        ...        
    </ul>
</div>
<a class="next" href="#">next</a>
<a class="prev" href="#">prev</a>
lt;div id="scrollContent">
    <ul id="assetList">
        <li data-asset-id="15201"></li>
        <li data-asset-id="15202"></li>
        <li data-asset-id="15203"></li>
        ...        
    </ul>
</div>
<a class="next" href="#">next</a>
<a class="prev" href="#">prev</a>

jQuery

$('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

    });
});

Confira o violino:http: //jsfiddle.net/desCodLov/77xjD/10

Obrigado