html - कैसे बताएं कि वर्तमान व्यूपोर्ट में कोई डीओएम तत्व दिखाई दे रहा है या नहीं?




firefox dom (15)

अद्यतन करें

आधुनिक ब्राउज़रों में, आप इंटरसेक्शन ऑब्जर्वर एपीआई को देखना चाहेंगे जो निम्न लाभ प्रदान करता है:

  • स्क्रॉल घटनाओं के लिए सुनने से बेहतर प्रदर्शन
  • क्रॉस डोमेन iframes में काम करता है
  • बता सकते हैं कि कोई तत्व किसी अन्य को बाधित / छेड़छाड़ कर रहा है या नहीं

छेड़छाड़ पर्यवेक्षक एक पूर्ण मानक होने के रास्ते पर है और पहले ही क्रोम 51+, एज 15+ और फ़ायरफ़ॉक्स 55+ में समर्थित है और सफारी के लिए विकास में है। एक polyfill भी उपलब्ध है।

पिछला जवाब

दान द्वारा प्रदान किए गए उत्तर के साथ कुछ मुद्दे हैं जो कुछ स्थितियों के लिए इसे अनुपयुक्त दृष्टिकोण बना सकते हैं। इनमें से कुछ मुद्दों को नीचे के उत्तर में उनके उत्तर में बताया गया है, कि उनका कोड तत्वों के लिए झूठी सकारात्मकता देगा:

  • परीक्षण किए जा रहे किसी के सामने किसी अन्य तत्व द्वारा छुपाया गया
  • माता-पिता या पूर्वज तत्व के दृश्य क्षेत्र के बाहर
  • सीएसएस clip प्रॉपर्टी का उपयोग करके एक तत्व या उसके बच्चे छिपाए जाते हैं

इन सीमाओं को एक सरल परीक्षण के निम्नलिखित परिणामों में प्रदर्शित किया जाता है:

समाधान: isElementVisible()

नीचे दिए गए परीक्षण परिणाम और कोड के कुछ हिस्सों की व्याख्या के साथ, उन समस्याओं का समाधान यहां दिया गया है।

function isElementVisible(el) {
    var rect     = el.getBoundingClientRect(),
        vWidth   = window.innerWidth || doc.documentElement.clientWidth,
        vHeight  = window.innerHeight || doc.documentElement.clientHeight,
        efp      = function (x, y) { return document.elementFromPoint(x, y) };     

    // Return false if it's not in the viewport
    if (rect.right < 0 || rect.bottom < 0 
            || rect.left > vWidth || rect.top > vHeight)
        return false;

    // Return true if any of its four corners are visible
    return (
          el.contains(efp(rect.left,  rect.top))
      ||  el.contains(efp(rect.right, rect.top))
      ||  el.contains(efp(rect.right, rect.bottom))
      ||  el.contains(efp(rect.left,  rect.bottom))
    );
}

उत्तीर्ण परीक्षा: http://jsfiddle.net/AndyE/cAY8c/

और नतीजा:

अतिरिक्त नोट्स

हालांकि, यह विधि अपनी सीमाओं के बिना नहीं है। उदाहरण के लिए, एक ही स्थान पर किसी अन्य तत्व की तुलना में निचले जेड-इंडेक्स के साथ परीक्षण किए जाने वाले तत्व को छिपे हुए के रूप में पहचाना जाएगा, भले ही सामने वाला तत्व वास्तव में इसके किसी हिस्से को छुपा न सके। फिर भी, इस विधि के कुछ मामलों में इसका उपयोग होता है कि दान का समाधान शामिल नहीं होता है।

दोनों element.getBoundingClientRect() और document.elementFromPoint() CSSOM वर्किंग ड्राफ्ट विनिर्देश का हिस्सा हैं और कम से कम IE 6 और बाद में और अधिकतर डेस्कटॉप ब्राउज़र लंबे समय तक समर्थित हैं (हालांकि, पूरी तरह से नहीं)। अधिक जानकारी के लिए इन कार्यों पर Quirksmode देखें।

contains() का उपयोग यह देखने के लिए किया जाता है कि document.elementFromPoint() द्वारा लौटा गया तत्व तत्व का एक बच्चा नोड है जिसे हम दृश्यता के लिए परीक्षण कर रहे हैं। यदि तत्व वापस लौटाया जाता है तो यह भी सही होता है। यह सिर्फ चेक को और मजबूत बनाता है। यह सभी प्रमुख ब्राउज़रों में समर्थित है, फ़ायरफ़ॉक्स 9.0 उनमें से अंतिम को जोड़ने के लिए है। पुराने फ़ायरफ़ॉक्स समर्थन के लिए, इस उत्तर के इतिहास की जांच करें।

यदि आप दृश्यता के लिए तत्व के चारों ओर अधिक बिंदुओं का परीक्षण करना चाहते हैं- यानी, यह सुनिश्चित करने के लिए कि तत्व से अधिक कवर नहीं किया गया है, कहें, 50% - उत्तर के अंतिम भाग को समायोजित करने के लिए बहुत कुछ नहीं लेना चाहिए। हालांकि, इस बात से अवगत रहें कि यदि आप यह सुनिश्चित करने के लिए प्रत्येक पिक्सेल की जांच करते हैं तो यह 100% दिखाई दे सकता है।

क्या यह बताने का कोई प्रभावी तरीका है कि कोई DOM तत्व (HTML दस्तावेज़ में) वर्तमान में दृश्यमान है ( व्यूपोर्ट में दिखाई देता है)?

(सवाल फ़ायरफ़ॉक्स का संबंध है)


JQuery प्लगइन inview कहा जाता है जो नौकरी करता है


इसी तरह की चुनौती के लिए मैंने वास्तव में इस scrollIntoViewIfNeeded() आनंद लिया जो scrollIntoViewIfNeeded() लिए scrollIntoViewIfNeeded() खुलासा करता है।

उत्तर देने के लिए आवश्यक सभी आवश्यक कुंग फू इस ब्लॉक के भीतर है:

var parent = this.parentNode,
    parentComputedStyle = window.getComputedStyle(parent, null),
    parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width')),
    parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width')),
    overTop = this.offsetTop - parent.offsetTop < parent.scrollTop,
    overBottom = (this.offsetTop - parent.offsetTop + this.clientHeight - parentBorderTopWidth) > (parent.scrollTop + parent.clientHeight),
    overLeft = this.offsetLeft - parent.offsetLeft < parent.scrollLeft,
    overRight = (this.offsetLeft - parent.offsetLeft + this.clientWidth - parentBorderLeftWidth) > (parent.scrollLeft + parent.clientWidth),
    alignWithTop = overTop && !overBottom;

this उस तत्व को संदर्भित करता है जिसे आप जानना चाहते हैं कि यह यानी overTop या overBottom - बस बहाव प्राप्त करना चाहिए ...


उपरोक्त @ डैन के समाधान के आधार पर ( https://.com/a/7557433/5628 ), मुझे कार्यान्वयन की सफाई करने के लिए जाना था ताकि एक ही पृष्ठ पर इसे कई बार उपयोग करना आसान हो:

$(function() {

  $(window).on('load resize scroll', function() {
    addClassToElementInViewport($('.bug-icon'), 'animate-bug-icon');
    addClassToElementInViewport($('.another-thing'), 'animate-thing');
    // 👏 repeat as needed ...
  });

  function addClassToElementInViewport(element, newClass) {
    if (inViewport(element)) {
      element.addClass(newClass);
    }
  }

  function inViewport(element) {
    if (typeof jQuery === "function" && element instanceof jQuery) {
      element = element[0];
    }
    var elementBounds = element.getBoundingClientRect();
    return (
      elementBounds.top >= 0 &&
      elementBounds.left >= 0 &&
      elementBounds.bottom <= $(window).height() &&
      elementBounds.right <= $(window).width()
    );
  }

});

जिस तरह से मैं इसका उपयोग कर रहा हूं वह यह है कि जब तत्व दृश्य में स्क्रॉल करता है, तो मैं एक कक्षा जोड़ रहा हूं जो एक सीएसएस कीफ्रेम एनीमेशन ट्रिगर करता है। यह बहुत सरल है और विशेष रूप से अच्छी तरह से काम करता है जब आपको पृष्ठ पर सशर्त रूप से एनिमेट करने के लिए 10+ चीजें मिलती हैं।

आशा करता हूँ की ये काम करेगा!


एक सार्वजनिक सेवा के रूप में:
सही गणना के साथ दान का जवाब (तत्व> खिड़की, विशेष रूप से मोबाइल फोन स्क्रीन पर हो सकता है), और सही jQuery परीक्षण, साथ ही साथ जोड़ना हैइलेमेंटपार्टलीइन व्यूपोर्ट:

वैसे, window.innerWidth और document.documentElement.clientWidth के बीच का difference यह है कि क्लाइंटविड्थ / क्लाइंट हाइट में स्क्रॉलबार शामिल नहीं है, जबकि window.innerWidth / ऊंचाई करता है।

function isElementPartiallyInViewport(el)
{
    //special bonus for those using jQuery
    if (typeof jQuery !== 'undefined' && el instanceof jQuery) el = el[0];

    var rect = el.getBoundingClientRect();
    // DOMRect { x: 8, y: 8, width: 100, height: 100, top: 8, right: 108, bottom: 108, left: 8 }
    var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
    var windowWidth = (window.innerWidth || document.documentElement.clientWidth);

    // http://.com/questions/325933/determine-whether-two-date-ranges-overlap
    var vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
    var horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);

    return (vertInView && horInView);
}


// http://.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
function isElementInViewport (el) 
{
    //special bonus for those using jQuery
    if (typeof jQuery !== 'undefined' && el instanceof jQuery) el = el[0];

    var rect = el.getBoundingClientRect();
    var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
    var windowWidth = (window.innerWidth || document.documentElement.clientWidth);

    return (
           (rect.left >= 0)
        && (rect.top >= 0)
        && ((rect.left + rect.width) <= windowWidth)
        && ((rect.top + rect.height) <= windowHeight)
    );

}


function fnIsVis(ele)
{
    var inVpFull = isElementInViewport(ele);
    var inVpPartial = isElementPartiallyInViewport(ele);
    console.clear();
    console.log("Fully in viewport: " + inVpFull);
    console.log("Partially in viewport: " + inVpPartial);
}

परीक्षण का मामला

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Test</title>
    <!--
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
    <script src="scrollMonitor.js"></script>
    -->

    <script type="text/javascript">

        function isElementPartiallyInViewport(el)
        {
            //special bonus for those using jQuery
            if (typeof jQuery !== 'undefined' && el instanceof jQuery) el = el[0];

            var rect = el.getBoundingClientRect();
            // DOMRect { x: 8, y: 8, width: 100, height: 100, top: 8, right: 108, bottom: 108, left: 8 }
            var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
            var windowWidth = (window.innerWidth || document.documentElement.clientWidth);

            // http://.com/questions/325933/determine-whether-two-date-ranges-overlap
            var vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
            var horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);

            return (vertInView && horInView);
        }


        // http://.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
        function isElementInViewport (el) 
        {
            //special bonus for those using jQuery
            if (typeof jQuery !== 'undefined' && el instanceof jQuery) el = el[0];


            var rect = el.getBoundingClientRect();
            var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
            var windowWidth = (window.innerWidth || document.documentElement.clientWidth);

            return (
                   (rect.left >= 0)
                && (rect.top >= 0)
                && ((rect.left + rect.width) <= windowWidth)
                && ((rect.top + rect.height) <= windowHeight)
            );

        }


        function fnIsVis(ele)
        {
            var inVpFull = isElementInViewport(ele);
            var inVpPartial = isElementPartiallyInViewport(ele);
            console.clear();
            console.log("Fully in viewport: " + inVpFull);
            console.log("Partially in viewport: " + inVpPartial);
        }


        // var scrollLeft = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft,
        // var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

    </script>

</head>
<body>

    <div style="display: block; width: 2000px; height: 10000px; background-color: green;">

        <br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br />

        <input type="button" onclick="fnIsVis(document.getElementById('myele'));" value="det" />

        <br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br />

        <div style="background-color: crimson; display: inline-block; width: 800px; height: 500px;" ></div>
        <div id="myele" onclick="fnIsVis(this);" style="display: inline-block; width: 100px; height: 100px; background-color: hotpink;">
        t
        </div>

        <br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br />

        <input type="button" onclick="fnIsVis(document.getElementById('myele'));" value="det" />

    </div>

    <!--
    <script type="text/javascript">

        var element = document.getElementById("myele");
        var watcher = scrollMonitor.create( element );

        watcher.lock();

        watcher.stateChange(function() {
            console.log("state changed");
            // $(element).toggleClass('fixed', this.isAboveViewport)
        });

    </script>
    -->
</body>
</html>

जांचता है कि तत्व कम से कम आंशिक रूप से दृश्य में है (लंबवत आयाम):

function inView(element) {
                var box = element.getBoundingClientRect();
                return inViewBox(box);
}

function inViewBox(box) {
                return ((box.bottom < 0) || (box.top > getWindowSize().h)) ? false : true;
}


function getWindowSize() { 
        return { w: document.body.offsetWidth || document.documentElement.offsetWidth || window.innerWidth, h: document.body.offsetHeight || document.documentElement.offsetHeight || window.innerHeight} 
}

मुझे लगता है कि यह करने के लिए यह एक और अधिक कार्यात्मक तरीका है। दान का जवाब रिकर्सिव संदर्भ में काम नहीं करता है।

यह फ़ंक्शन उस समस्या को हल करता है जब आपका तत्व दूसरों के अंदर स्क्रॉल करने योग्य divs के अंदर किसी भी स्तर का परीक्षण करके एचटीएमएल टैग के ऊपरी भाग का परीक्षण करके होता है, और पहले झूठे में रुक जाता है।

/**
 * fullVisible=true only returns true if the all object rect is visible
 */
function isReallyVisible(el, fullVisible) {
    if ( el.tagName == "HTML" )
            return true;
    var parentRect=el.parentNode.getBoundingClientRect();
    var rect = arguments[2] || el.getBoundingClientRect();
    return (
            ( fullVisible ? rect.top    >= parentRect.top    : rect.bottom > parentRect.top ) &&
            ( fullVisible ? rect.left   >= parentRect.left   : rect.right  > parentRect.left ) &&
            ( fullVisible ? rect.bottom <= parentRect.bottom : rect.top    < parentRect.bottom ) &&
            ( fullVisible ? rect.right  <= parentRect.right  : rect.left   < parentRect.right ) &&
            isReallyVisible(el.parentNode, fullVisible, rect)
    );
};

मुझे लगता है कि यहां उपयोग किए गए उत्तर अधिकतर उपयोग मामलों के लिए अत्यधिक जटिल हैं। यह कोड अच्छी तरह से काम करता है (JQuery का उपयोग करके) और पूरी तरह से दृश्यमान और आंशिक रूप से दृश्यमान तत्वों के बीच अंतर करता है।

var element         = $("#element");
var topOfElement    = element.offset().top;
var bottomOfElement = element.offset().top + element.outerHeight(true);
var $window         = $(window);

$window.bind('scroll', function() {

    var scrollTopPosition   = $window.scrollTop()+$window.height();
    var windowScrollTop     = $window.scrollTop()

    if( windowScrollTop > topOfElement && windowScrollTop < bottomOfElement) {
       // Element is partially visible (above viewable area)
       console.log("Element is partially visible (above viewable area)");

    }else if( windowScrollTop > bottomOfElement && windowScrollTop > topOfElement ) {
        // Element is hidden (above viewable area)
       console.log("Element is hidden (above viewable area)");

    }else if( scrollTopPosition < topOfElement && scrollTopPosition < bottomOfElement ) {
        // Element is hidden (below viewable area)
        console.log("Element is hidden (below viewable area)");

    }else if( scrollTopPosition < bottomOfElement && scrollTopPosition > topOfElement ) {
        // Element is partially visible (below viewable area)
        console.log("Element is partially visible (below viewable area)");

    }else{
        // Element is completely visible
        console.log("Element is completely visible");
    }
});

मेरे द्वारा यहां दिए गए सभी उत्तरों केवल तभी जांचते हैं जब तत्व वर्तमान व्यूपोर्ट के अंदर स्थित है या नहीं । लेकिन इसका मतलब यह नहीं है कि यह दिखाई दे रहा है
क्या होगा यदि दिया गया तत्व बहती हुई सामग्री के साथ एक div के अंदर है, और इसे देखने के बाहर स्क्रॉल किया गया है?

इसे हल करने के लिए, आपको यह जांचना होगा कि तत्व सभी माता-पिता द्वारा निहित है या नहीं।
मेरा समाधान ठीक है कि:

यह आपको यह भी निर्दिष्ट करने की अनुमति देता है कि तत्व को कितना दिखाना है।

Element.prototype.isVisible = function(percentX, percentY){
    var tolerance = 0.01;   //needed because the rects returned by getBoundingClientRect provide the position up to 10 decimals
    if(percentX == null){
        percentX = 100;
    }
    if(percentY == null){
        percentY = 100;
    }

    var elementRect = this.getBoundingClientRect();
    var parentRects = [];
    var element = this;

    while(element.parentElement != null){
        parentRects.push(element.parentElement.getBoundingClientRect());
        element = element.parentElement;
    }

    var visibleInAllParents = parentRects.every(function(parentRect){
        var visiblePixelX = Math.min(elementRect.right, parentRect.right) - Math.max(elementRect.left, parentRect.left);
        var visiblePixelY = Math.min(elementRect.bottom, parentRect.bottom) - Math.max(elementRect.top, parentRect.top);
        var visiblePercentageX = visiblePixelX / elementRect.width * 100;
        var visiblePercentageY = visiblePixelY / elementRect.height * 100;
        return visiblePercentageX + tolerance > percentX && visiblePercentageY + tolerance > percentY;
    });
    return visibleInAllParents;
};

इस समाधान ने इस तथ्य को नजरअंदाज कर दिया कि तत्व अन्य तथ्यों के कारण दिखाई नहीं दे सकते हैं, जैसे opacity: 0

मैंने क्रोम और इंटरनेट एक्सप्लोरर 11 में इस समाधान का परीक्षण किया है।


मेरे पास एक ही सवाल था और getBoundingClientRect () का उपयोग कर इसे समझ लिया। यह कोड पूरी तरह से 'जेनेरिक' है और केवल इसे काम करने के लिए लिखा जाना चाहिए (आपको प्रत्येक तत्व के लिए इसे लिखना नहीं है जिसे आप जानना चाहते हैं व्यूपोर्ट में है)। यह कोड केवल यह देखने के लिए जांच करता है कि यह व्यूपोर्ट में क्षैतिज रूप से लंबवत नहीं है या नहीं । इस मामले में, वेरिएबल (सरणी) 'तत्व' में वे सभी तत्व होते हैं जिन्हें आप व्यूपोर्ट में लंबवत रूप से जांच रहे हैं, इसलिए किसी भी तत्व को कहीं भी ले जाएं और उन्हें वहां स्टोर करें। 'लूप के लिए', प्रत्येक तत्व के माध्यम से loops और यह देखने के लिए जांच करता है कि यह व्यूपोर्ट में लंबवत है या नहीं। जब भी उपयोगकर्ता स्क्रॉल करता है तो यह कोड निष्पादित करता है! यदि GetBoudingClientRect () शीर्ष 3/4 से कम है व्यूपोर्ट (तत्व व्यूपोर्ट में एक चौथाई है), तो यह 'व्यूपोर्ट में' के रूप में पंजीकृत होता है। चूंकि कोड सामान्य है, इसलिए आप जानना चाहेंगे कि 'कौन सा तत्व व्यूपोर्ट में है। इसे खोजने के लिए, आप इसे कस्टम विशेषता, नोड नाम, आईडी, कक्षा का नाम, आदि द्वारा निर्धारित कर सकते हैं। यहां मेरा कोड है (मुझे बताएं कि यह काम नहीं करता है, यह आईई 11, फ़ायरफ़ॉक्स 40.0.3, क्रोम संस्करण 45.0.2454.85 मीटर, ओपेरा 31.0.1889.174, और विंडोज 10 के साथ एज में परीक्षण किया गया है, [अभी तक सफारी नहीं] ) ...

//scrolling handlers...
window.onscroll = function(){
  var elements = document.getElementById('whatever').getElementsByClassName('whatever');
  for(var i = 0; i != elements.length; i++)
  {
   if(elements[i].getBoundingClientRect().top <= window.innerHeight*0.75 && elements[i].getBoundingClientRect().top > 0)
   {
      console.log(elements[i].nodeName + ' ' + elements[i].className + ' ' + elements[i].id + ' is in the viewport; proceed with whatever code you want to do here.');
   }
};

उम्मीद है कि यह किसी की मदद करता है :-)


मैं इस फ़ंक्शन का उपयोग करता हूं (यह केवल जांचता है कि वाई वाईस्क्रीन है क्योंकि अधिकांश समय x की आवश्यकता नहीं है)

function elementInViewport(el) {
    var elinfo = {
        "top":el.offsetTop,
        "height":el.offsetHeight,
    };

    if (elinfo.top + elinfo.height < window.pageYOffset || elinfo.top > window.pageYOffset + window.innerHeight) {
        return false;
    } else {
        return true;
    }

}

मैंने दान के जवाब की कोशिश की लेकिन सीमा निर्धारित करने के लिए इस्तेमाल बीजगणित गलत है। रायनवे का जवाब करीब है, लेकिन परीक्षण किया जा रहा तत्व कम से कम 1 पिक्सेल द्वारा व्यूपोर्ट के अंदर होना चाहिए, इसलिए इस फ़ंक्शन को आजमाएं:

function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();

    return rect.bottom > 0 &&
        rect.right > 0 &&
        rect.left < (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */ &&
        rect.top < (window.innerHeight || document.documentElement.clientHeight) /* or $(window).height() */;
}

यहां मेरा समाधान है, यह स्क्रॉल-सक्षम कंटेनर के अंदर कोई तत्व छुपा हुआ है, तो यह काम करेगा।

यहां एक डेमो है (विंडो को फिर से आकार देने का प्रयास करें)

var visibleY = function(el){
    var top = el.getBoundingClientRect().top, rect, el = el.parentNode;
    do {
        rect = el.getBoundingClientRect();
        if (top <= rect.bottom === false)
            return false;
        el = el.parentNode;
    } while (el != document.body);
    // Check its within the document viewport
    return top <= document.documentElement.clientHeight;
};

मुझे केवल यह जांचने की आवश्यकता है कि यह वाई अक्ष में दिखाई दे रहा है (स्क्रॉलिंग AJAX लोड के लिए अधिक रिकॉर्ड सुविधा के लिए)।


http://www.appelsiini.net/projects/viewport

प्लगइन का उपयोग करने में बहुत आसान है, बस उपयोग करें: इन-व्यूपोर्ट


अद्यतन: समय पर मार्च और हमारे ब्राउज़र हैं। इस तकनीक की अब अनुशंसा नहीं की जाती है और यदि आपको IE <7 का समर्थन करने की आवश्यकता नहीं है, तो आपको नीचे @ दान का समाधान ( https://.com/a/7557433/5628 ) का उपयोग करना चाहिए।

मूल समाधान (अब पुराना):

यह जांच करेगा कि वर्तमान व्यूपोर्ट में तत्व पूरी तरह से दिखाई दे रहा है या नहीं:

function elementInViewport(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top >= window.pageYOffset &&
    left >= window.pageXOffset &&
    (top + height) <= (window.pageYOffset + window.innerHeight) &&
    (left + width) <= (window.pageXOffset + window.innerWidth)
  );
}

व्यूपोर्ट में तत्व का कोई भी भाग दृश्यमान है या नहीं, यह निर्धारित करने के लिए आप इसे संशोधित कर सकते हैं:

function elementInViewport2(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top < (window.pageYOffset + window.innerHeight) &&
    left < (window.pageXOffset + window.innerWidth) &&
    (top + height) > window.pageYOffset &&
    (left + width) > window.pageXOffset
  );
}




dom