Obtiene el primer y último elemento visible en un div desplazable

Question

Tengo una lista de pulgares en un div desplazable, animado con el botón next/prev. 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 la lista finaliza. ¿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> 

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 

    }); 
}); 

Salida del violín: http://jsfiddle.net/desCodLov/77xjD/10/

Gracias.

Answer 1

¿Esto es lo que buscas? :

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

violín: http://jsfiddle.net/77xjD/17/

Answer 2

Por visibilidad, supongo que el elemento debe tener al menos la esquina superior derecha visible. Si solo desea seleccionar elementos que sean completamente visibles, agregue o reste los valores width() y height() del elemento. El código básico se muestra a continuación:

var $first, $last, 
    $container = $("#assetList"), 
    $items = $container.children("li"), 
    positions = container.offset(), 
    rightside = positions.left + $container.width(), 
    bottomside = positions.top + $container.height(); 
$items.each(function(){ 
    var $this = $(this), 
     position = $this.offset(); 
       // If <li> top post >= <ul> top 
    if ($first && position.top >= positions.top 
       // If <li> left >= <ul> left 
       && positions.left >= position.left) { 
      /* Optionally, add two more conditions, to only accept elememts 
       which are fully visible: 
       && positions.top + $this.height() <= bottomside 
       && positions.left + $this.width() <= leftside 
       */ 
     $first = this; 
    } 
    // See previous comments. 
    if (position.top < bottomside && position.left < rightside) { 
     $last = this; 
    } 
}); 
// $first = first visible element, eg [HTMLLiElement] 
// $last = last visible element, eg [HTMLLiElement] 

Answer 3

me acaba de actualizar la solución en su fiddle.

Guarde en la memoria caché la primera li y las posiciones superiores de la última li en el momento de la inicialización y utilicándolas para determinar qué elemento obtiene la posición al hacer clic en el botón siguiente o anterior.

y por supuesto he copiado las siguientes líneas de Rob W's respuesta.

var $container = $("#assetList"), 
$items = $container.children("li"),