jquery - यह जांचने के लिए कि कोई तत्व ऑफ़-स्क्रीन है या नहीं




zk (6)

यदि डीआईवी तत्व ऑफ-स्क्रीन नहीं गिर रहा है तो मुझे jQuery से जांचना होगा। तत्व सीएसएस विशेषताओं के अनुसार दृश्यमान और प्रदर्शित होते हैं, लेकिन उन्हें जानबूझकर ऑफ-स्क्रीन द्वारा रखा जा सकता है:

position: absolute; 
left: -1000px; 
top: -1000px;

मैं jQuery का उपयोग नहीं कर सका :visible चयनकर्ता के रूप में तत्व में शून्य-शून्य ऊंचाई और चौड़ाई है।

मैं कुछ भी कल्पना नहीं कर रहा हूँ। यह पूर्ण स्थिति प्लेसमेंट तरीका है कि मेरा Ajax ढांचा कुछ विगेट्स के छिपाने / शो को लागू करता है।


आप $(div).position() का उपयोग कर div की स्थिति की जांच कर सकते हैं और जांच सकते हैं कि बाएं और शीर्ष मार्जिन गुण 0 से कम हैं या नहीं:

if($(div).position().left < 0 && $(div).position().top < 0){
    alert("off screen");
}

इस पर निर्भर करता है कि "ऑफ़स्क्रीन" की आपकी परिभाषा क्या है। क्या वह व्यूपोर्ट के भीतर है, या आपके पृष्ठ की परिभाषित सीमाओं के भीतर है?

Element.getBoundingClientRect() का उपयोग करके आप आसानी से पता लगा सकते हैं कि आपका तत्व आपके व्यूपोर्ट (यानी ऑनस्क्रीन या ऑफस्क्रीन) की Element.getBoundingClientRect() भीतर है या नहीं:

jQuery.expr.filters.offscreen = function(el) {
  var rect = el.getBoundingClientRect();
  return (
           (rect.x + rect.width) < 0 
             || (rect.y + rect.height) < 0
             || (rect.x > window.innerWidth || rect.y > window.innerHeight)
         );
};

फिर आप इसे कई तरीकों से उपयोग कर सकते हैं:

// returns all elements that are offscreen
$(':offscreen');

// boolean returned if element is offscreen
$('div').is(':offscreen');

देखने के पोर्ट के बाहर जांचने के लिए प्लगइन की कोई ज़रूरत नहीं है।

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
var d = $(document).scrollTop();

$.each($("div"),function(){
    p = $(this).position();
    //vertical
    if (p.top > h + d || p.top > h - d){
        console.log($(this))
    }
    //horizontal
    if (p.left < 0 - $(this).width() || p.left > w){
        console.log($(this))
    }
});

मुझे पता है कि यह बहुत देर हो चुकी है लेकिन इस प्लगइन को काम करना चाहिए। http://remysharp.com/2009/01/26/element-in-view-event-plugin/

$('p.inview').bind('inview', function (event, visible) {
if (visible) {
  $(this).text('You can see me!');
} else {
  $(this).text('Hidden again');
}

यहां एक jQuery प्लगइन है जो उपयोगकर्ताओं को यह जांचने की अनुमति देता है कि कोई तत्व ब्राउजर के दृश्य व्यूपोर्ट में आता है या नहीं, ब्राउज़र स्क्रॉल स्थिति को खाते में ले जाता है।

$('#element').visible();

आप आंशिक दृश्यता की जांच भी कर सकते हैं:

$('#element').visible( true);

एक दोष यह है कि यह केवल ऊर्ध्वाधर स्थिति / स्क्रॉलिंग के साथ काम करता है, हालांकि मिश्रण में क्षैतिज स्थिति जोड़ने के लिए यह आसान होना चाहिए।


  • दिए गए तत्व के शीर्ष से दूरी प्राप्त करें
  • उसी दिए गए तत्व की ऊंचाई जोड़ें। यह आपको दिए गए तत्व के अंत तक स्क्रीन के शीर्ष से कुल संख्या बताएगा।
  • तो आपको बस इतना करना है कि कुल दस्तावेज़ ऊंचाई से घटाएं

    jQuery(function () {
        var documentHeight = jQuery(document).height();
        var element = jQuery('#you-element');
        var distanceFromBottom = documentHeight - (element.position().top + element.outerHeight(true));
        alert(distanceFromBottom)
    });
    




zk