在滾動div中獲取第一個也是最後一個可見元素

Question

我有一個可滾動div的縮略圖列表，用next/prev按鈕製作動畫。每次點擊「下一步」按鈕都應該匹配第一個可見元素的屬性。每次點擊「prev」按鈕應該給我最後一個可見元素的屬性。

我真的不知道如何在數學上解決這個問題，因爲滾動距離在列表結束時是可變的。有人可以幫我嗎？

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 

    }); 
}); 

退房小提琴： http://jsfiddle.net/desCodLov/77xjD/10/

謝謝。

Answer 1

這是你要找的？ ：

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

小提琴：http://jsfiddle.net/77xjD/17/

Answer 2

通過可見性，我認爲元素應該至少有可見的右上角。如果您只想選擇完全可見的元素，請添加或減去元素的width()和height()值。基本的代碼如下所示：

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

我剛剛更新瞭解決您的fiddle。

我在初始化時緩存了第一個li的頂部並保留了li的頂部位置，並使用它們來查找哪個元素獲取了位置，當您單擊next或previous按鈕時。

和當然我從以下副本複製了Rob W's答案。

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