Nhận phần tử hiển thị đầu tiên và cuối cùng trong div có thể cuộn

Question

Tôi có danh sách các ngón tay cái trong div có thể cuộn, được làm động bằng nút tiếp theo/trước. Mỗi nhấp chuột vào nút "tiếp theo" phải khớp với thuộc tính của phần tử hiển thị đầu tiên. Mỗi lần nhấp vào nút "prev" sẽ cho tôi thuộc tính của phần tử hiển thị cuối cùng.

Tôi thực sự không biết cách giải toán toán học như thế, vì khoảng cách di chuyển là biến khi danh sách kết thúc. Ai đó có thể giúp tôi không?

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 

    }); 
}); 

Check-out fiddle: http://jsfiddle.net/desCodLov/77xjD/10/

Cảm ơn bạn.

Answer 1

Đây có phải là nội dung bạn đang tìm kiếm không ?? :

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

Theo mức hiển thị, tôi cho rằng yếu tố ít nhất phải có góc trên bên phải hiển thị. Nếu bạn chỉ muốn chọn các phần tử được hiển thị đầy đủ, hãy thêm hoặc trừ các giá trị width() và height() của phần tử. Mã cơ bản được hiển thị bên dưới:

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

Tôi vừa cập nhật giải pháp trong fiddle của bạn.

Tôi đã lưu trữ vị trí hàng đầu của vị trí hàng đầu và cuối cùng của li đầu tiên tại thời điểm khởi tạo và sử dụng chúng để tìm ra yếu tố nào đang nhận vị trí, khi bạn nhấp vào nút tiếp theo hoặc trước đó.

và ofcourse tôi đã sao chép các dòng dưới đây từ câu trả lời Rob W's.

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