जांचें कि क्या तत्व div

Question

में दिखाई दे रहा है मेरे पास कई ली के अंदर एक div है।

<div> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
... 
</div> 

आम तौर पर जब उपयोगकर्ता विंडो के अंदर स्क्रॉल है, कुछ <li> के अतिप्रवाह में मिलता है और छिपा दिया जाएगा। मुझे पता है कि मैं यह जांच सकता हूं कि इस jQuery प्लगइन के साथ स्क्रीन के व्यूपोर्ट में कोई तत्व है या नहीं: http://www.appelsiini.net/projects/viewport मुझे बस इस कार्यक्षमता की आवश्यकता होगी, लेकिन पूरी स्क्रीन के लिए नहीं, बल्कि केवल एक ही div पर। इसलिए जब तत्व दिखाई नहीं दे रहे हैं तो मैं कुछ पाठ अपडेट कर सकता हूं।

कुछ मदद की ज़रूरत है, अग्रिम धन्यवाद!

Answer 1

This एक बहुत अच्छा जवाब है, लेकिन यहां आपके द्वारा उल्लिखित व्यूपोर्ट प्लगइन का एक संशोधित संस्करण है।

(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); 

एचटीएमएल के साथ इस तरह

:

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

इसे इस तरह कॉल:

$.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/