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 "Avanti" dovrebbe corrispondere all'attributo del primo elemento visibile. Ogni clic di clic sul pulsante "Prev" dovrebbe darmi l'attributo dell'ultimo elemento visibile.

Non so davvero come risolverlo matematicamente, perché la distanza di scorrimento è variabile quando l'elenco termina. Qualcuno può aiutarmi per favore?

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

    });
});

Dai un'occhiata al violino:http://jsfiddle.net/descodlov/77xjd/10/

Grazie.

Answer 1

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

Violino: http://jsfiddle.net/77xjd/17/

Answer 2

Per visibilità, presumo che l'elemento dovrebbe avere almeno l'angolo in alto visibile. Se si desidera selezionare solo elementi completamente visibili, aggiungi o abbracci il width() e height() valori dell'elemento. Il codice di base è mostrato di seguito:

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 tuo violino.

Ho memorizzato nella cache le prime posizioni di alto livello e ultimo di Li al tempo di inizializzazione e utilizzandole per scoprire quale elemento sta ottenendo la posizione, quando si fa clic sul pulsante Next o Precedenti.

e ovviamente ho copiato le linee di seguito da Rob W's Rispondere.

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