스크롤 가능한 div에서 첫 번째와 마지막 표시 요소 가져 오기

Question

다음/prev 버튼으로 움직이는 스크롤 가능 div에 엄지 목록이 있습니다. "다음"버튼을 클릭 할 때마다 첫 번째 보이는 요소의 속성과 일치해야합니다. "이전"버튼을 클릭 할 때마다 마지막으로 표시되는 요소의 속성이 표시됩니다.

목록이 끝나면 스크롤 거리가 가변적이기 때문에 수학적으로 어떻게 풀어야할지 모르겠다. 누군가 나를 도울 수 있습니까?

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의 상단 위치를 초기화 시간에 캐시하고 다음 또는 이전 버튼을 클릭 할 때 어떤 요소가 위치를 얻고 있는지 알아 내기 위해이를 사용합니다.

물론 내가 아래의 라인을 Rob W's 대답에서 복사했습니다.

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