Kiểm tra xem phần tử có hiển thị trong div

Question

Tôi có một div có nhiều li bên trong.

Thông thường khi người dùng đang cuộn bên trong cửa sổ, một số số <li> sẽ bị xâm nhập và sẽ bị ẩn. Tôi biết tôi có thể kiểm tra xem một phần tử có ở chế độ xem của màn hình với Plugin jQuery này không: http://www.appelsiini.net/projects/viewport Tôi chỉ cần chức năng này chứ không phải cho toàn bộ màn hình mà chỉ trên một div duy nhất. Vì vậy, tôi có thể cập nhật một số văn bản khi các phần tử không hiển thị.

Cần trợ giúp, Cảm ơn trước!

Answer 1

This là một câu trả lời rất hay, nhưng đây là phiên bản sửa đổi của plugin Viewport mà bạn đã đề cập.

(function($) { 

$.belowthefold = function(lookIn, elements, settings) { 
    var fold = $(lookIn).height() + $(lookIn).scrollTop(); 
    return $(elements).filter(function(){ 
     return fold <= $(this).offset().top - settings.threshold; 
    }); 
}; 

$.abovethetop = function(lookIn, elements, settings) { 
    var top = $(lookIn).scrollTop(); 
    return $(elements).filter(function(){ 
     return top >= $(this).offset().top + $(this).height() - settings.threshold; 
    }); 
}; 

$.rightofscreen = function(lookIn, elements, settings) { 
    var fold = $(lookIn).width() + $(lookIn).scrollLeft(); 
    return $(elements).filter(function(){ 
     return fold <= $(this).offset().left - settings.threshold; 
    }); 
}; 

$.leftofscreen = function(lookIn, elements, settings) { 
    var left = $(lookIn).scrollLeft(); 
    return $(elements).filter(function(){ 
     return left >= $(this).offset().left + $(this).width() - settings.threshold; 
    }); 
}; 

})(jQuery); 

Với HTML như thế này:

<div id="lookInMe"> 
    <div class="peek"></div> 
    <div class="peek"></div> 
    [ ... ] 
</div> 

Gọi nó như thế này:

$.belowthefold("#lookInMe", ".peek", {threshold : 0}).text("Below"); 
$.abovethetop("#lookInMe", ".peek", {threshold : 0}).text("Above"); 
$.leftofscreen("#lookInMe", ".peek", {threshold : 0}).text("Left"); 
$.rightofscreen("#lookInMe", ".peek", {threshold : 0}).text("Right"); 

http://jsfiddle.net/daCrosby/vhF7x/1/