Holen Sie sich das erste und letzte sichtbare Element in einem scrollbaren Div

Question

Ich habe eine Liste von Daumen in einem scrollbaren DIV, das mit der nächsten/vorherigen Schaltfläche animiert ist. Jede Klick auf "Weiter" sollte mit dem Attribut des ersten sichtbaren Elements übereinstimmen. Jede Klick auf "PREV" -Taste sollte mir das Attribut des letzten sichtbaren Elements geben.

Ich weiß nicht wirklich, wie man das mathematisch löst, da die Bildlaufdistanz beim Ende der Liste variabel ist. Kann mir bitte jemand helfen?

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

    });
});

Schauen Sie sich die Geige an:http://jsfiddle.net/descodlov/77xjd/10/

Vielen Dank.

Answer 1

Suchst du das? :

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

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

Answer 2

Ich gehe davon aus, dass das Element zumindest die obere Ecke sichtbar sein sollte. Wenn Sie nur Elemente auswählen möchten, die vollständig sichtbar sind, fügen Sie das hinzu oder substract width() und height() Werte des Elements. Der Basiscode ist unten angezeigt:

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

Ich habe gerade die Lösung in Ihrem aktualisiert Geige.

Ich habe den ersten und letztem Li -Positionen des ersten Li zur Initialisierungszeit zwischen den oberen und letztem Li -Positionen zwischengespeichert und habe mit ihnen herausgefunden, welches Element die Position abgerufen wird, wenn Sie auf die nächste oder vorherige Schaltfläche klicken.

und natürlich habe ich die folgenden Zeilen von kopiert Rob W's Antworten.

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