Tengo una lista de pulgares en un div desplazable, animada con el botón siguiente / anterior. Cada clic en el botón "siguiente" debe coincidir con el atributo del primer elemento visible. Cada clic en el botón "prev" debería darme el atributo del último elemento visible.

Realmente no sé cómo resolver matemáticamente eso, porque la distancia de desplazamiento es variable cuando finaliza la lista. ¿Puede alguien ayudarme

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

    });
});

Compruebe el violín:http: //jsfiddle.net/desCodLov/77xjD/10

Gracias