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

Question

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

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

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

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

Answer 1

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

Element.getBoundingClientRect() का उपयोग करते हुए आप आसानी से पता लगा सकते हैं या नहीं, अपने तत्व आपका व्यूपोर्ट (यानी परदे पर या गुप्त) के boundries के भीतर है:

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

Answer 2

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

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

Answer 3

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

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

तुम भी आंशिक दृश्यता के लिए जाँच कर सकते हैं:

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

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

Answer 4

मुझे पता है कि यह बहुत देर हो चुकी है लेकिन इस प्लगइन को काम करना चाहिए। 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'); 
} 

Answer 5

मैं a small plugin that does this बनाया, और यह कुछ लचीला विकल्प (यह भी काम करता है जब आप ब्राउज़र विंडो का आकार बदलने) है।

Answer 6

प्लगइन के बाहर की जांच करने के लिए प्लगइन की आवश्यकता नहीं है।

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

Answer 7

अच्छा ... मुझे यहां हर प्रस्तावित समाधान में कुछ समस्याएं मिली हैं।

• यदि आप पूरे तत्व स्क्रीन या बस के किसी भाग पर होना चाहते हैं का चयन करने के लिए सक्षम होना चाहिए
• प्रस्तावित समाधान विफल रहता है तत्व उच्च/खिड़की की तुलना में व्यापक है और थोड़े ब्राउज़र विंडो शामिल है।

यहां मेरा समाधान है जिसमें jQuery.fn इंस्टेंस फ़ंक्शन और expression शामिल हैं। मैंने अपने काम के अंदर और अधिक चर बनाया है, लेकिन जटिल तार्किक समस्या के लिए मैं इसे छोटे, स्पष्ट रूप से नामित टुकड़ों में विभाजित करना चाहता हूं।

मैं getBoundingClientRect विधि है कि व्यूपोर्ट अपेक्षाकृत तत्व स्थिति रिटर्न उपयोग कर रहा हूँ तो मैं स्क्रॉल स्थिति

useage के बारे में परवाह करने की जरूरत नहीं:

$(".some-element").filter(":onscreen").doSomething(); 
$(".some-element").filter(":entireonscreen").doSomething(); 
$(".some-element").isOnScreen(); // true/false 
$(".some-element").isOnScreen(true); // true/false (partially on screen) 
$(".some-element").is(":onscreen"); // true/false (partially on screen) 
$(".some-element").is(":entireonscreen"); // true/false 

स्रोत:

$.fn.isOnScreen = function(partial){ 

    //let's be sure we're checking only one element (in case function is called on set) 
    var t = $(this).first(); 

    //we're using getBoundingClientRect to get position of element relative to viewport 
    //so we dont need to care about scroll position 
    var box = t[0].getBoundingClientRect(); 

    //let's save window size 
    var win = { 
     h : $(window).height(), 
     w : $(window).width() 
    }; 

    //now we check against edges of element 

    //firstly we check one axis 
    //for example we check if left edge of element is between left and right edge of scree (still might be above/below) 
    var topEdgeInRange = box.top >= 0 && box.top <= win.h; 
    var bottomEdgeInRange = box.bottom >= 0 && box.bottom <= win.h; 

    var leftEdgeInRange = box.left >= 0 && box.left <= win.w; 
    var rightEdgeInRange = box.right >= 0 && box.right <= win.w; 


    //here we check if element is bigger then window and 'covers' the screen in given axis 
    var coverScreenHorizontally = box.left <= 0 && box.right >= win.w; 
    var coverScreenVertically = box.top <= 0 && box.bottom >= win.h; 

    //now we check 2nd axis 
    var topEdgeInScreen = topEdgeInRange && (leftEdgeInRange || rightEdgeInRange || coverScreenHorizontally); 
    var bottomEdgeInScreen = bottomEdgeInRange && (leftEdgeInRange || rightEdgeInRange || coverScreenHorizontally); 

    var leftEdgeInScreen = leftEdgeInRange && (topEdgeInRange || bottomEdgeInRange || coverScreenVertically); 
    var rightEdgeInScreen = rightEdgeInRange && (topEdgeInRange || bottomEdgeInRange || coverScreenVertically); 

    //now knowing presence of each edge on screen, we check if element is partially or entirely present on screen 
    var isPartiallyOnScreen = topEdgeInScreen || bottomEdgeInScreen || leftEdgeInScreen || rightEdgeInScreen; 
    var isEntirelyOnScreen = topEdgeInScreen && bottomEdgeInScreen && leftEdgeInScreen && rightEdgeInScreen; 

    return partial ? isPartiallyOnScreen : isEntirelyOnScreen; 

}; 

$.expr.filters.onscreen = function(elem) { 
    return $(elem).isOnScreen(true); 
}; 

$.expr.filters.entireonscreen = function(elem) { 
    return $(elem).isOnScreen(true); 
}; 

Answer 8

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

• फिर तुम सब करने की है घटाना है कि कुल दस्तावेज़ ऊंचाई

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