私は、次/前のボタンでアニメーション、スクロール可能なdivの中に親指のリストを持っているスクロール可能なdivの中

Question

を最初と最後の目に見える要素を取得します。 「次へ」ボタンをクリックするたびに、最初に表示される要素の属性と一致する必要があります。 "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

、私は要素は、少なくとも可視upperrightコーナーを持っている必要があることを前提としています。完全に表示されている要素だけを選択したい場合は、要素の値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のソリューションを更新しました。

私は、初期化時に最初に李のトップと最後の李のトップポジションをキャッシュされ、あなたが次または前のボタンをクリックすると、位置を取得している要素を見つけるためにそれらを使用します。

とofcourseの私はRob W's答えから以下の行をコピーしました。

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