Get the first and last visible element in a scrollable div

Question

I have list of thumbs in a scrollable div, animated with next/prev button. Each click on "next "button should match the attribute of the first visible element. Each click on "prev" button should give me the attribute of the last visible element.

I don't really know how to mathematically solve that, because the scroll distance is variable when the list ends. Can someone please help me out?

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>

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

    });
});

Check out the fiddle: http://jsfiddle.net/desCodLov/77xjD/10/

Thank you.

Answer 1

Is this what your looking for ?? :

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) {
                first = $(this).attr('data-asset-id');
            }
        });
    });
});

$('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');
            }
        });
    });
});

Fiddle : http://jsfiddle.net/77xjD/17/