Obtenez le premier et le dernier élément visible dans un div scrollable

Question

Je liste des pouces dans un div scrollable, animation avec le bouton suivant / précédent. Pour chaque clic sur le bouton « suivant » doit correspondre à l'attribut du premier élément visible. Pour chaque clic sur le bouton « prev » devrait me donner l'attribut du dernier élément visible.

Je ne sais pas vraiment comment résoudre mathématiquement que, parce que la distance de défilement est variable lorsque la fin de la liste. Quelqu'un peut-il me aider?

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

    });
});

Consultez le violon: http://jsfiddle.net/desCodLov/77xjD/10/

Merci.

Answer 1

Est-ce que vous cherchez ?? :

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

Par visibilité, je suppose que l'élément devrait au moins avoir le coin upperright visible. Si vous voulez sélectionner uniquement les éléments qui sont parfaitement visibles, ajouter ou soustraire les valeurs width() et height() de l'élément. Le code de base est illustré ci-dessous:

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

Je viens de la solution mise à jour dans votre violon .

Je cache le premier Haut li et postes de dernière li au moment de l'initialisation et de les utiliser pour savoir quel élément devient la position, lorsque vous cliquez sur le bouton suivant ou précédent.

et j'ai copié ofcourse les lignes ci-dessous de réponse Rob W.

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