Ottieni il primo e l'ultimo elemento visibile in un div scorrevole

Question

Ho un elenco di pollici in un div scorrevole, animato con il pulsante next/prev. Ogni clic sul pulsante "successivo" dovrebbe corrispondere all'attributo del primo elemento visibile. Ogni clic sul pulsante "prev" dovrebbe darmi l'attributo dell'ultimo elemento visibile.

Non so davvero come risolverlo matematicamente, perché la distanza di scorrimento è variabile al termine dell'elenco. Qualcuno può aiutarmi?

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 

    }); 
}); 

Partenza il violino: http://jsfiddle.net/desCodLov/77xjD/10/

Grazie.

Answer 1

È questo che stai cercando? :

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/

Answer 2

Per visibilità, presumo che l'elemento debba avere almeno l'angolo in alto a vista visibile. Se si desidera selezionare solo elementi completamente visibili, aggiungere o sottrarre i valori width() e height() dell'elemento. Il codice di base è la seguente:

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

Ho appena aggiornato la soluzione nel vostro fiddle.

Ho memorizzato nella cache le prime posizioni del primo e dell'ultimo li al momento dell'inizializzazione e li utilizzo per scoprire quale elemento sta ottenendo la posizione, quando si fa clic sul pulsante successivo o precedente.

e naturalmente ho copiato le righe seguenti dalla risposta Rob W's.

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