स्क्रॉल करने के बाद तत्व दिखाई दे रहा है तो कैसे जांचें?

Question

मैं AJAX के माध्यम से तत्वों को लोड कर रहा हूं। यदि आप पृष्ठ को नीचे स्क्रॉल करते हैं तो उनमें से कुछ ही दिखाई देते हैं।
क्या कोई तरीका है जिससे मुझे पता चल सकता है कि कोई तत्व अब पृष्ठ के दृश्य भाग में है?

Comments

उसका मतलब है कि वह यह जानने के लिए एक विधि चाहता है कि क्या ब्राउज़र विंडो में किसी दिए गए तत्व को प्रदर्शित किया गया है, या यदि उपयोगकर्ता को इसे देखने के लिए स्क्रॉल करना है।

— रोमेन लिंसोलास

यह जांचने के लिए कि क्या कोई तत्व कंटेनर में पूरी तरह से दिखाई दे रहा है, बस एक अतिरिक्त चयनकर्ता परम जोड़ें और उसके लिए एलएम कोड का फिर से उपयोग करें। Library.IsElementVisibleInContainer = function (elementSelector, containerSelector) { var containerViewTop = $(containerSelector).offset().top; var containerViewBottom = containerViewTop + $(containerSelector).height();

— Lifes

के संभावित डुप्लिकेट कैसे पता लगाएं कि किसी DOM तत्व वर्तमान व्यूपोर्ट में दिखाई दे रहा है?

— ऑड्रियस मेसकॉस्कस

संभावित डुप्लिकेट कैसे बताएं कि क्या कोई DOM तत्व वर्तमान व्यूपोर्ट में दिखाई दे रहा है?

— सुमित

सभी जवाब reflow ट्रिगर करेंगे तो यह बोतल गर्दन हो सकती है, यदि आप समर्थन करते हैं तो IntersectionObserver का उपयोग करें । आधुनिक ब्राउज़रों पर इसका बेहतर प्रदर्शन होगा,

— jcubic

Answer 1

यह काम कर जाना चाहिए:

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

सरल उपयोगिता फ़ंक्शन यह आपको एक उपयोगिता फ़ंक्शन को कॉल करने की अनुमति देगा जो उस तत्व को स्वीकार करता है जिसे आप खोज रहे हैं और यदि आप चाहते हैं कि तत्व पूरी तरह से देखने या आंशिक रूप से होना चाहिए।

function Utils() {

}

Utils.prototype = {
    constructor: Utils,
    isElementInView: function (element, fullyInView) {
        var pageTop = $(window).scrollTop();
        var pageBottom = pageTop + $(window).height();
        var elementTop = $(element).offset().top;
        var elementBottom = elementTop + $(element).height();

        if (fullyInView === true) {
            return ((pageTop < elementTop) && (pageBottom > elementBottom));
        } else {
            return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
        }
    }
};

var Utils = new Utils();

प्रयोग

var isElementInView = Utils.isElementInView($('#flyout-left-container'), false);

if (isElementInView) {
    console.log('in view');
} else {
    console.log('out of view');
}

Comments

ध्यान दें कि यह केवल तभी काम करता है जब दस्तावेज़ स्क्रॉल किया जाने वाला तत्व है, यानी आप स्क्रॉलिंग इनर पेन के अंदर किसी तत्व की दृश्यता की जाँच नहीं कर रहे हैं।

— एंड्रयू बी।

कैसे थोड़ा ऑफसेट जोड़ने के लिए?

— जुरगेन पॉल

केवल तब काम किया जब मैंने window.innerHeightइसके बजाय प्रयोग किया

— क्रिश्चियन स्चनोर

क्योंकि elemTopमैंने इस्तेमाल किया $(elem).position().topऔर elemBottomमैंने इस्तेमाल किया elemTop + $(elem).outerHeight(true)।

— सारा वेसेल्स

के लिए: "तत्व के किसी भी भाग को देखने में", मैंने इस्तेमाल किया: (((elemTop> = docViewTop) && (elemTop <= docViewBottom)) || ((elemBottom>> docViewTop) && (elemBottom <= docViewBottom)

— ग्रिजली

Answer 2

वेनिला में यह जवाब :

function isScrolledIntoView(el) {
    var rect = el.getBoundingClientRect();
    var elemTop = rect.top;
    var elemBottom = rect.bottom;

    // Only completely visible elements return true:
    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    // Partially visible elements return true:
    //isVisible = elemTop < window.innerHeight && elemBottom >= 0;
    return isVisible;
}

Comments

क्या यह नहीं होना चाहिए isVisible = elementTop < window.innerHeight && elementBottom >= 0? अन्यथा स्क्रीन पर एक तत्व आधा गलत हो जाता है।

— 21

नहीं। अगर पृष्ठ पर कुछ तत्व पूरी तरह से दिखाई दे रहा है तो मैं जाँच करता हूँ। यदि आप कुछ भाग की दृश्यता की जांच करना चाहते हैं - तो आप इस स्निपेट को कस्टमाइज़ कर सकते हैं।

— ब्राविक्विक

मुझे यह उत्तर चुने हुए उत्तर से बेहतर प्रदर्शन करने के लिए मिलता है। सरल भी।

— एडम वेनेजिया

अनुमोदित उत्तर की तुलना में, यह सैकड़ों तत्वों के साथ वाया को बेहतर बनाता है।

— ncla

यहाँ एक छोटी सी

— फिडेल को

Answer 3

अद्यतन: IntersectionObserver का उपयोग करें

---

अब तक मैंने जो सबसे अच्छा तरीका पाया है वह jQuery का प्लगइन है । एक जादू की तरह काम करता है।

एक कस्टम "दिखाई" घटना का अनुकरण करता है, जो तब होता है जब कोई तत्व दृश्य में स्क्रॉल करता है या अन्यथा उपयोगकर्ता को दिखाई देता है।

$('#foo').appear(function() {
  $(this).text('Hello world');
});

इस प्लगइन का उपयोग उस सामग्री के अनावश्यक अनुरोधों को रोकने के लिए किया जा सकता है जो देखने योग्य क्षेत्र के बाहर या बाहर है।

Comments

यह एक अच्छा प्लगइन है, इसमें कोई संदेह नहीं है, लेकिन इस सवाल का जवाब नहीं है।

— जॉन एडम्स

जबकि jQuery- प्रदर्शित प्लगइन मुख्य पृष्ठ क्षेत्र पर सामग्री के लिए अच्छा है, यह दुर्भाग्य से अतिप्रवाह के साथ निश्चित आकार स्क्रॉलिंग डिव के साथ समस्या है। घटना समय से पहले आग लग सकती है जब बाध्य तत्व पृष्ठ के दृश्य-सक्षम क्षेत्र के भीतर है, लेकिन div के देखने योग्य क्षेत्र के बाहर है और तब अपेक्षित रूप से आग नहीं लगती है जब तत्व div में देखने में आता है।

— पीटर

क्या एक गायब प्लगइन है?

— शामून

@Shamoon स्रोत की जाँच करें appear pluginऔर आपको शायद प्लगइन !प्राप्त करने के लिए कहीं न कहीं जोड़ना होगा disappear।

— भाग्यशाली सोनी

एक नोट के रूप में, यह jQuery के साथ काम नहीं करता है। 1.11.X github.com/morr/jquery.appear/issues/37

— जेसन परम

Answer 4

यहां मेरा शुद्ध जावास्क्रिप्ट समाधान है जो काम करता है अगर यह एक स्क्रॉल करने योग्य कंटेनर के अंदर छिपा हुआ है।

यहां डेमो करें (विंडो का आकार बदलने का भी प्रयास करें )

var visibleY = function(el){
  var rect = el.getBoundingClientRect(), top = rect.top, height = rect.height, 
    el = el.parentNode
  // Check if bottom of the element is off the page
  if (rect.bottom < 0) return false
  // Check its within the document viewport
  if (top > document.documentElement.clientHeight) return false
  do {
    rect = el.getBoundingClientRect()
    if (top <= rect.bottom === false) return false
    // Check if the element is out of view due to a container scrolling
    if ((top + height) <= rect.top) return false
    el = el.parentNode
  } while (el != document.body)
  return true
};

EDIT 2016-03-26: मैंने उस तत्व को स्क्रॉल करने के लिए खाते को अपडेट किया है ताकि वह स्क्रॉल-सक्षम कंटेनर के ऊपर छिपा हो। EDIT 2018-10-08: स्क्रीन के ऊपर दृश्य से स्क्रॉल किए जाने पर संभाल करने के लिए अपडेट किया गया।

Comments

धन्यवाद, शायद बेहतर हो return top <= document.documentElement.clientHeight && top >= 0;

— Yousef Salimpour

+1 यह केवल कोडित (यानी थर्ड पार्टी नहीं) उत्तर था जो तत्वों की पुनरावर्ती प्रकृति को ध्यान में रखता है। मैंने क्षैतिज, ऊर्ध्वाधर और पृष्ठ स्क्रॉल को संभालने के लिए विस्तार किया है: jsfiddle.net/9nuqpgqa

— Pebbl

यह समाधान केवल तत्व के शीर्ष की जाँच करता है। यदि पहला शीर्ष पिक्सेल दिखाई देता है, तो यह तब भी सही होगा जब बाकी वस्तु दिखाई नहीं दे रही हो। यह देखने के लिए कि क्या संपूर्ण तत्व दिखाई दे रहा है, आपको नीचे की संपत्ति की भी जाँच करने की आवश्यकता है।

— वोज्शिएक जक्यूबस

ऐ, साफ! इस उत्तर को लिखने में मदद करने के लिए उपयोग किया जाता है (क्रेडिट के रूप में जेएस टिप्पणी के साथ)।

— रोमेर -1888

गुम; लूप में दूसरे "रिटर्न झूठे" के बाद

— मिखाइल रामेंदिक

Answer 5

IntersectionObserver का उपयोग करना API (आधुनिक ब्राउज़र में मूल)

यह निर्धारित करना आसान और कुशल है कि क्या कोई तत्व दर्शक में, या किसी स्क्रॉल करने वाले कंटेनर में, एक पर्यवेक्षक का उपयोग करके दिखाई दे रहा है ।

एक scrollघटना संलग्न करने और मैन्युअल रूप से इवेंट कॉलबैक पर जाँच करने की आवश्यकता समाप्त हो जाती है, इस प्रकार दक्षता:

// this is the target which is observed
var target = document.querySelector('div');

// configure the intersection observer instance
var intersectionObserverOptions = {
  root: null,
  rootMargin: '150px',
  threshold: 1.0
}
    
var observer = new IntersectionObserver(onIntersection, intersectionObserverOptions);

// provide the observer with a target
observer.observe(target);

function onIntersection(entries){
  entries.forEach(entry => {
    console.clear();
    console.log(entry.intersectionRatio)
    target.classList.toggle('visible', entry.intersectionRatio > 0);
    
    // Are we in viewport?
    if (entry.intersectionRatio > 0) {
      // Stop watching 
      // observer.unobserve(entry.target);
    }
  });
}

.box{ width:100px; height:100px; background:red; margin:1000px; }
.box.visible{ background:green; }

Scroll both Vertically & Horizontally...
<div class='box'></div>

---

ब्राउज़र समर्थन तालिका देखें (IE / Safari में समर्थित नहीं)

Comments

धन्यवाद! यह मेरे लिए काम करता है और इसे IE11 में github.com/w3c/IntersectionObserver

— मैट विल्सन

अब तक का सबसे अच्छा उपाय। पॉलीफिल के बिना IE11 में काम किया!

— फाबियान वॉन एलर्ट्स

ध्यान दें कि यह STILL iOS / macOS Safari में दुर्भाग्य से समर्थित नहीं है। यदि आप पॉलीफ़िल चुनते हैं, तो संपूर्ण मुद्दों की जाँच करना सुनिश्चित करें, जो उपयोगकर्ताओं का एक बड़ा समूह है

— Lland

@ लेलैंड - यह परियोजना पर निर्भर है। मेरी सभी परियोजनाओं के लिए यह एक पूर्ण 0 उपयोगकर्ता समूह है। मैं वेबसाइटें नहीं

— बनाता

मैं इसे कई तत्वों पर एक लूप में चलाने की कोशिश कर रहा हूं, लेकिन यह काम नहीं कर रहा है। कोई विचार? मैं उस लूप में लक्षित करने के लिए तत्व जोड़ रहा हूं।

— साशा ग्रिंडौ

Answer 6

jQuery वेपाइंट प्लगइन यहाँ बहुत अच्छा जाता है।

$('.entry').waypoint(function() {
   alert('You have scrolled to an entry.');
});

प्लगइन की साइट पर कुछ उदाहरण हैं ।

Comments

मेरे लिए यह केवल एक ऑफसेट के साथ काम करता है $('#my-div').waypoint(function() { console.log('Hello there!'); }, { offset: '100%' });

— leymannx

Answer 7

कैसा रहेगा

function isInView(elem){
   return $(elem).offset().top - $(window).scrollTop() < $(elem).height() ;
}

उसके बाद आप तत्व को इस तरह से देखने के बाद एक बार जो चाहें ट्रिगर कर सकते हैं

$(window).scroll(function(){
   if (isInView($('.classOfDivToCheck')))
      //fire whatever you what 
      dothis();
})

वह मेरे लिए ठीक काम करता है

Comments

यह मेरे लिए काम करता है, लेकिन मैंने इसका इस्तेमाल किया, प्रतीत होता है कि अधिक पूर्ण, फ़ंक्शन isScrolledIntoView at stackoverflow.com/questions/487073/… :) :)

— Meetai.com

मुझे लगता है कि यह $ (विंडो) होना चाहिए। .SrollTop () <$ (elem) .offset (); top + $ (elem) .height ();

— युवा

मेरा संशोधन इस तरह होगा: `वापसी $ (खिड़की) .scrollTop () + $ (विंडो) .height ()> $ (elem) .offset ()। Top + $ (elem) .height (); `

— बुबेनकोड 21

Answer 8

WebResourcesDepot ने स्क्रॉल करते हुए लोड करने के लिए एक स्क्रिप्ट लिखी है जो कुछ समय पहले jQuery का उपयोग करती है । आप यहां उनका लाइव डेमो देख सकते हैं । उनकी कार्यक्षमता का आधार यह था:

$(window).scroll(function(){
  if  ($(window).scrollTop() == $(document).height() - $(window).height()){
    lastAddedLiveFunc();
  }
});

function lastAddedLiveFunc() { 
  $('div#lastPostsLoader').html('<img src="images/bigLoader.gif">');
  $.post("default.asp?action=getLastPosts&lastPostID="+$(".wrdLatest:last").attr("id"),
    function(data){
        if (data != "") {
          $(".wrdLatest:last").after(data);         
        }
      $('div#lastPostsLoader').empty();
    });
};

Answer 9

Tweeked Scott Dowding का मेरी आवश्यकता के लिए अच्छा कार्य- इसका उपयोग यह खोजने के लिए किया जाता है कि क्या तत्व को स्क्रीन में स्क्रॉल किया गया है अर्थात यह शीर्ष किनारे पर है।

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}

Answer 10

यह देखने के लिए कि क्या तत्व ( el) स्क्रॉल करने योग्य div में दिखाई दे रहा है ( holder)

function isElementVisible (el, holder) {
  holder = holder || document.body
  const { top, bottom, height } = el.getBoundingClientRect()
  const holderRect = holder.getBoundingClientRect()

  return top <= holderRect.top
    ? holderRect.top - top <= height
    : bottom - holderRect.bottom <= height
},

JQuery के साथ उपयोग:

var el = $('tr:last').get(0);
var holder = $('table').get(0);
isVisible =  isScrolledIntoView(el, holder);

Comments

एकल पृष्ठ अनुप्रयोगों के इस युग में यह जांचना अधिक आम हो गया है कि कोई तत्व खिड़की के अलावा किसी अन्य तत्व के भीतर दिखाई देता है या नहीं । इसलिए यह मेरा उत्थान है।

— एच डॉग

Answer 11

isScrolledIntoView एक बहुत ही आवश्यक फ़ंक्शन है, इसलिए मैंने इसे आज़माया, यह व्यूपोर्ट की तुलना में हेयेर नहीं तत्वों के लिए काम करता है, लेकिन अगर तत्व व्यूपोर्ट से बड़ा है तो यह काम नहीं करता है। इसे ठीक करने के लिए आसानी से स्थिति बदलें

return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));

इसके लिए:

return (docViewBottom >= elemTop && docViewTop <= elemBottom);

यहां देखें डेमो: http://jsfiddle.net/RRSmQ/

Answer 12

यहां अधिकांश उत्तर इस बात पर ध्यान नहीं देते हैं कि एक तत्व को भी छिपाया जा सकता है क्योंकि यह एक div के दृष्टिकोण से स्क्रॉल किया जाता है, न केवल पूरे पृष्ठ पर।

उस संभावना को कवर करने के लिए, आपको मूल रूप से यह जांचना होगा कि तत्व अपने प्रत्येक माता-पिता की सीमा के अंदर स्थित है या नहीं।

यह समाधान ठीक यही करता है:

function(element, 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 = element.getBoundingClientRect();
    var parentRects = [];

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

यह आपको यह भी निर्दिष्ट करने की अनुमति देता है कि प्रत्येक दिशा में उसे कितने प्रतिशत दिखाई देना है।
यह इस संभावना को कवर नहीं करता है कि यह अन्य कारकों के कारण छिपा हो सकता है, जैसे display: hidden।

यह सभी प्रमुख ब्राउज़रों में काम करना चाहिए, क्योंकि यह केवल उपयोग करता है getBoundingClientRect। मैंने इसे व्यक्तिगत रूप से क्रोम और इंटरनेट एक्सप्लोरर 11 में परीक्षण किया।

Comments

इस कोड के लिए धन्यवाद। मुझे आश्चर्य है कि आप इस मामले में इवेंट श्रोता को स्क्रॉल में कैसे जोड़ेंगे कि आपके पास कई नेस्टेड स्क्रॉल करने योग्य तत्व हैं? ऐसा लगता है कि श्रोता को अकेले खिड़की में जोड़ना पर्याप्त नहीं है, क्या हमें प्रत्येक स्क्रॉल करने योग्य कंटेनर में श्रोता को जोड़ने के लिए शीर्ष माता-पिता के पास वापस जाना है?

— mr1031011

@ mr1031011 हैंडलर को विंडो में जोड़ना संभव है और फिर स्क्रॉल किए गए कंटेनर की पहचान करने के लिए लक्ष्य की जांच करें।

— डोम्सी

सही, यह @vanowm द्वारा दिए गए उदाहरण के साथ काम नहीं करता है,

— mr1031011

Answer 13

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop(),
        docViewBottom = docViewTop + $(window).height(),
        elemTop = $(elem).offset().top,
     elemBottom = elemTop + $(elem).height();
   //Is more than half of the element visible
   return ((elemTop + ((elemBottom - elemTop)/2)) >= docViewTop && ((elemTop + ((elemBottom - elemTop)/2)) <= docViewBottom));
}

Answer 14

यहाँ http://web-profile.com.ua/ से एक और समाधान है

<script type="text/javascript">
$.fn.is_on_screen = function(){
    var win = $(window);
    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right ||    viewport.bottom < bounds.top || viewport.top > bounds.bottom));
 };

if( $('.target').length > 0 ) { // if target element exists in DOM
    if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded
        $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info       
    } else {
        $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
    }
}
$(window).scroll(function(){ // bind window scroll event
if( $('.target').length > 0 ) { // if target element exists in DOM
    if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded
        $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info
    } else {
        $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
    }
}
});
</script>

इसे JSFiddle में देखें

Answer 15

यह किसी भी पैडिंग, सीमा या मार्जिन पर विचार करता है और तत्व के साथ-साथ व्यूपोर्ट से भी बड़े तत्व हैं।

function inViewport($ele) {
    var lBound = $(window).scrollTop(),
        uBound = lBound + $(window).height(),
        top = $ele.offset().top,
        bottom = top + $ele.outerHeight(true);

    return (top > lBound && top < uBound)
        || (bottom > lBound && bottom < uBound)
        || (lBound >= top && lBound <= bottom)
        || (uBound >= top && uBound <= bottom);
}

इसे कॉल करने के लिए कुछ इस तरह से उपयोग करें:

var $myElement = $('#my-element'),
    canUserSeeIt = inViewport($myElement);

console.log(canUserSeeIt); // true, if element is visible; false otherwise

Answer 16

JQuery के लिए एक प्लगइन है जिसे inview कहा जाता है जो एक नया "inview" इवेंट जोड़ता है।

---

यहाँ jQuery प्लगइन के लिए कुछ कोड है जो घटनाओं का उपयोग नहीं करता है:

$.extend($.expr[':'],{
    inView: function(a) {
        var st = (document.documentElement.scrollTop || document.body.scrollTop),
            ot = $(a).offset().top,
            wh = (window.innerHeight && window.innerHeight < $(window).height()) ? window.innerHeight : $(window).height();
        return ot > st && ($(a).height() + ot) < (st + wh);
    }
});

(function( $ ) {
    $.fn.inView = function() {
        var st = (document.documentElement.scrollTop || document.body.scrollTop),
        ot = $(this).offset().top,
        wh = (window.innerHeight && window.innerHeight < $(window).height()) ? window.innerHeight : $(window).height();

        return ot > st && ($(this).height() + ot) < (st + wh);
    };
})( jQuery );

मुझे यह एक टिप्पणी में यहाँ मिला ( http://remysharp.com/2009/01/26/element-in-view-event-plugin/ ) जेम्स नामक ब्लोक द्वारा

Comments

काश, jQuery का इनवॉइस अब भी कायम नहीं होता और jQuery के वर्तमान संस्करणों के साथ काम नहीं करता।

— मिकमेकाना

JQuery 1 विरासत ब्राउज़र समर्थन के लिए है, नई सुविधाएँ jQuery 2 में हैं।

— mikemaccana

लिंक उदाहरण नहीं दिखा रहा है क्योंकि पेज अपडेट किया गया है।

— प्रोग्रामिंग

Answer 17

मुझे स्क्रॉल करने योग्य DIV कंटेनर के अंदर तत्वों में दृश्यता की जांच करने की आवश्यकता थी

    //p = DIV container scrollable
    //e = element
    function visible_in_container(p, e) {
        var z = p.getBoundingClientRect();
        var r = e.getBoundingClientRect();

        // Check style visiblilty and off-limits
        return e.style.opacity > 0 && e.style.display !== 'none' &&
               e.style.visibility !== 'hidden' &&
               !(r.top > z.bottom || r.bottom < z.top ||
                 r.left > z.right || r.right < z.left);
    }

Comments

अगर मैं बदलने पर भी यह मेरे लिए काम करता e.style.opacity > 0करने के लिए (!e.style.opacity || e.style.opacity > 0)क्योंकि डिफ़ॉल्ट रूप से यह एफएफ में मेरे लिए रिक्त स्ट्रिंग है।

— ब्रेट ज़मीर

Answer 18

इस बेहतरीन उत्तर का निर्माण , आप ES2015 + का उपयोग करके इसे थोड़ा और सरल बना सकते हैं:

function isScrolledIntoView(el) {
  const { top, bottom } = el.getBoundingClientRect()
  return top >= 0 && bottom <= window.innerHeight
}

यदि आप खिड़की से बाहर जाने के बारे में परवाह नहीं करते हैं और केवल यह ध्यान रखते हैं कि नीचे देखा गया है, तो इसे सरल बनाया जा सकता है

function isSeen(el) {
  return el.getBoundingClientRect().bottom <= window.innerHeight
}

या यहां तक ​​कि एक-लाइनर

const isSeen = el => el.getBoundingClientRect().bottom <= window.innerHeight

Answer 19

जब आप स्क्रॉल करते हैं तो तत्व वर्तमान व्यूपोर्ट में है या नहीं यह जांचने के लिए आप jquery प्लगइन "ऑनस्क्रीन" का उपयोग कर सकते हैं। प्लगइन चयनकर्ता के ": onScreen" को तब सेट करता है जब चयनकर्ता स्क्रीन पर दिखाई देता है। यह प्लगइन के लिए लिंक है जिसे आप अपने प्रोजेक्ट में शामिल कर सकते हैं। " http://benpickles.github.io/onScreen/jquery.onscreen.min.js "

आप नीचे दिए गए उदाहरण की कोशिश कर सकते हैं जो मेरे लिए काम करता है।

$(document).scroll(function() {
    if($("#div2").is(':onScreen')) {
        console.log("Element appeared on Screen");
        //do all your stuffs here when element is visible.
    }
    else {
        console.log("Element not on Screen");
        //do all your stuffs here when element is not visible.
    }
});

HTML कोड:

<div id="div1" style="width: 400px; height: 1000px; padding-top: 20px; position: relative; top: 45px"></div> <br>
<hr /> <br>
<div id="div2" style="width: 400px; height: 200px"></div>

सीएसएस:

#div1 {
    background-color: red;
}
#div2 {
    background-color: green;
}

Answer 20

मेरे आवेदन में ऐसी विधि है, लेकिन यह jQuery का उपयोग नहीं करता है:

/* Get the TOP position of a given element. */
function getPositionTop(element){
    var offset = 0;
    while(element) {
        offset += element["offsetTop"];
        element = element.offsetParent;
    }
    return offset;
}

/* Is a given element is visible or not? */
function isElementVisible(eltId) {
    var elt = document.getElementById(eltId);
    if (!elt) {
        // Element not found.
        return false;
    }
    // Get the top and bottom position of the given element.
    var posTop = getPositionTop(elt);
    var posBottom = posTop + elt.offsetHeight;
    // Get the top and bottom position of the *visible* part of the window.
    var visibleTop = document.body.scrollTop;
    var visibleBottom = visibleTop + document.documentElement.offsetHeight;
    return ((posBottom >= visibleTop) && (posTop <= visibleBottom));
}

संपादित करें: यह विधि IE (कम से कम संस्करण 6) के लिए अच्छी तरह से काम करती है। एफएफ के साथ संगतता के लिए टिप्पणियां पढ़ें।

Comments

किसी कारण से। document.body.scrollTop हमेशा 0 (ff3 पर) देता है। इसे var दृश्यमान में बदलें = (document.documentElement.scrollTop; document.documentElement.scrollTop: document.body.scrollTop);

— योआवफ

उसके लिए खेद है। मेरा आवेदन केवल IE 6 में चलना चाहिए (हां, मैं भाग्यशाली नहीं हूं :(), इसलिए मैंने एफएफ में कभी भी इसका परीक्षण नहीं किया ...

— रोमेन लिंसोलास

अगर यह सही होता तो यह सबसे अच्छा जवाब होता। अपनी एक पंक्ति को इस पर सही करें: var visibleBottom = visibleTop + window.innerHeight;मैं jQuery का उपयोग नहीं कर रहा हूँ और आपने मुझे सही उत्तर खोजने में मदद की है।

— Bitterblue

Answer 21

यदि आप इसे एक और div के भीतर स्क्रॉलिंग आइटम के लिए ट्वीक करना चाहते हैं,

function isScrolledIntoView (elem, divID) 

{

    var docViewTop = $('#' + divID).scrollTop();


    var docViewBottom = docViewTop + $('#' + divID).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
}

Answer 22

स्वीकार किए गए उत्तर को संशोधित किया ताकि तत्व के पास "प्रदर्शित" गुणवत्ता के अलावा किसी अन्य चीज़ के लिए निर्धारित गुण प्रदर्शित हो।

function isScrolledIntoView(elem) {
   var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();
  var elemDisplayNotNone = $(elem).css("display") !== "none";

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop) && elemDisplayNotNone);
}

Answer 23

यहाँ क्षैतिज, ऊर्ध्वाधर या दोनों में म्यूटूल का उपयोग करके एक ही चीज़ को प्राप्त करने का एक तरीका है।

Element.implement({
inVerticalView: function (full) {
    if (typeOf(full) === "null") {
        full = true;
    }

    if (this.getStyle('display') === 'none') {
        return false;
    }

    // Window Size and Scroll
    var windowScroll = window.getScroll();
    var windowSize = window.getSize();
    // Element Size and Scroll
    var elementPosition = this.getPosition();
    var elementSize = this.getSize();

    // Calculation Variables
    var docViewTop = windowScroll.y;
    var docViewBottom = docViewTop + windowSize.y;
    var elemTop = elementPosition.y;
    var elemBottom = elemTop + elementSize.y;

    if (full) {
        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
            && (elemBottom <= docViewBottom) && (elemTop >= docViewTop) );
    } else {
        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }
},
inHorizontalView: function(full) {
    if (typeOf(full) === "null") {
        full = true;
    }

    if (this.getStyle('display') === 'none') {
        return false;
    }

    // Window Size and Scroll
    var windowScroll = window.getScroll();
    var windowSize = window.getSize();
    // Element Size and Scroll
    var elementPosition = this.getPosition();
    var elementSize = this.getSize();

    // Calculation Variables
    var docViewLeft = windowScroll.x;
    var docViewRight = docViewLeft + windowSize.x;
    var elemLeft = elementPosition.x;
    var elemRight = elemLeft + elementSize.x;

    if (full) {
        return ((elemRight >= docViewLeft) && (elemLeft <= docViewRight)
            && (elemRight <= docViewRight) && (elemLeft >= docViewLeft) );
    } else {
        return ((elemRight <= docViewRight) && (elemLeft >= docViewLeft));
    }
},
inView: function(full) {
    return this.inHorizontalView(full) && this.inVerticalView(full);
}});

Answer 24

यह देखने के लिए कि कोई तत्व 75% दृश्यमान है (यानी 25% से कम स्क्रीन बंद है) यह जांचने के लिए एक उदाहरण आधारित है ।

function isScrolledIntoView(el) {
  // check for 75% visible
  var percentVisible = 0.75;
  var elemTop = el.getBoundingClientRect().top;
  var elemBottom = el.getBoundingClientRect().bottom;
  var elemHeight = el.getBoundingClientRect().height;
  var overhang = elemHeight * (1 - percentVisible);

  var isVisible = (elemTop >= -overhang) && (elemBottom <= window.innerHeight + overhang);
  return isVisible;
}

Answer 25

इस सवाल के 30 से अधिक उत्तर हैं, और उनमें से कोई भी आश्चर्यजनक सरल, शुद्ध जेएस समाधान का उपयोग नहीं करता है जो मैं उपयोग कर रहा हूं। इसे हल करने के लिए सिर्फ jQuery लोड करने की आवश्यकता नहीं है, क्योंकि कई अन्य लोग जोर दे रहे हैं।

यह देखने के लिए कि क्या तत्व व्यूपोर्ट के भीतर है, हमें पहले शरीर के भीतर तत्वों की स्थिति निर्धारित करनी चाहिए। जैसा कि मैंने एक बार सोचा था, हमें यह पुनरावृत्ति करने की आवश्यकता नहीं है। इसके बजाय, हम उपयोग कर सकते हैं element.getBoundingClientRect()।

pos = elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top;

यह मान ऑब्जेक्ट के शीर्ष और शरीर के शीर्ष के बीच Y अंतर है।

हमें तब बताना चाहिए कि क्या तत्व दृश्य के भीतर है। अधिकांश कार्यान्वयन पूछते हैं कि क्या पूर्ण तत्व व्यूपोर्ट के भीतर है, इसलिए यह वह है जिसे हम कवर करेंगे।

सबसे पहले, विंडो के शीर्ष स्थिति है: window.scrollY।

हम विंडो की ऊँचाई को विंडो की ऊँचाई से जोड़कर उसकी शीर्ष स्थिति प्राप्त कर सकते हैं:

var window_bottom_position = window.scrollY + window.innerHeight;

तत्व की शीर्ष स्थिति प्राप्त करने के लिए एक सरल कार्य करें:

function getElementWindowTop(elem){
    return elem && typeof elem.getBoundingClientRect === 'function' ? elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top : 0;
}

यह फ़ंक्शन विंडो के भीतर तत्व की शीर्ष स्थिति लौटाएगा या 0यदि आप इसे .getBoundingClientRect()विधि के साथ एक तत्व के अलावा कुछ और पास करते हैं तो यह वापस आ जाएगी । यह विधि लंबे समय से आसपास है, इसलिए आपको अपने ब्राउज़र को इसका समर्थन नहीं करने के बारे में चिंता नहीं करनी चाहिए।

अब, हमारे तत्व की शीर्ष स्थिति है:

var element_top_position = getElementWindowTop(element);

और या तत्व का निचला स्थान है:

var element_bottom_position = element_top_position + element.clientHeight;

अब हम निर्धारित कर सकते हैं कि तत्व व्यूपोर्ट के भीतर है या नहीं, अगर तत्व की निचली स्थिति व्यूपोर्ट की शीर्ष स्थिति से कम है और यह जांचने से कि तत्व की टॉप पोजिशन व्यूपोर्ट के निचले स्थान से अधिक है या नहीं:

if(element_bottom_position >= window.scrollY 
&& element_top_position <= window_bottom_position){
    //element is in view
else
    //element is not in view

वहां से, आप in-viewअपने तत्व पर एक वर्ग जोड़ने या हटाने के लिए तर्क कर सकते हैं , जिसे आप बाद में अपने CSS में संक्रमण प्रभाव के साथ संभाल सकते हैं।

मैं बिल्कुल चकित हूं कि मुझे यह समाधान कहीं और नहीं मिला, लेकिन मुझे विश्वास है कि यह सबसे साफ और सबसे प्रभावी समाधान है, और इसके लिए आपको jQuery लोड करने की आवश्यकता नहीं है!

Comments

बहुत अच्छी व्याख्या! लेकिन पहले से ही उत्तर हैं कि आप जो करते हैं ठीक उसी तरह करते हैं, जैसे कि सहयोगी का जवाब

— डॉमसी

@ डोमीसी हम्म, मैं किसी तरह उस पर छोड़ दिया। काफी उचित। यद्यपि यह इंगित करने के लिए धन्यवाद। इसे दूसरे तरीके से देखना अच्छा है।

— वेबवंडर

Answer 26

इस उत्तर का एक अधिक कुशल संस्करण :

 /**
 * Is element within visible region of a scrollable container
 * @param {HTMLElement} el - element to test
 * @returns {boolean} true if within visible region, otherwise false
 */
 function isScrolledIntoView(el) {
      var rect = el.getBoundingClientRect();
      return (rect.top >= 0) && (rect.bottom <= window.innerHeight);
 }

Answer 27

यदि पृष्ठ पर तत्व का कोई भी भाग दिखाई देता है, तो यह विधि सही हो जाएगी। इसने मेरे मामले में बेहतर काम किया और किसी और की मदद कर सकता है।

function isOnScreen(element) {
  var elementOffsetTop = element.offset().top;
  var elementHeight = element.height();

  var screenScrollTop = $(window).scrollTop();
  var screenHeight = $(window).height();

  var scrollIsAboveElement = elementOffsetTop + elementHeight - screenScrollTop >= 0;
  var elementIsVisibleOnScreen = screenScrollTop + screenHeight - elementOffsetTop >= 0;

  return scrollIsAboveElement && elementIsVisibleOnScreen;
}

Answer 28

स्क्रॉल करने योग्य div (कंटेनर) के लिए सरल संशोधन

var isScrolledIntoView = function(elem, container) {
    var containerHeight = $(container).height();
    var elemTop = $(elem).position().top;
    var elemBottom = elemTop + $(elem).height();
    return (elemBottom > 0 && elemTop < containerHeight);
}

ध्यान दें: यह काम नहीं करता है यदि तत्व स्क्रॉल करने योग्य div से बड़ा है।

Answer 29

मैंने इस छोटे jQuery फ़ंक्शन एक्सटेंशन को अनुकूलित किया, जिसे आप बेझिझक उपयोग कर सकते हैं (MIT लाइसेंस)।

/**
 * returns true if an element is visible, with decent performance
 * @param [scope] scope of the render-window instance; default: window
 * @returns {boolean}
 */
jQuery.fn.isOnScreen = function(scope){
    var element = this;
    if(!element){
        return;
    }
    var target = $(element);
    if(target.is(':visible') == false){
        return false;
    }
    scope = $(scope || window);
    var top = scope.scrollTop();
    var bot = top + scope.height();
    var elTop = target.offset().top;
    var elBot = elTop + target.height();

    return ((elBot <= bot) && (elTop >= top));
};

Answer 30

मैंने इस कार्य के लिए एक घटक लिखा है , जिसे बड़ी संख्या में तत्वों को तेजी से संभालने के लिए डिज़ाइन किया गया है ( एक धीमी मोबाइल पर 1000 तत्वों के लिए <10ms की धुन के लिए) )।

यह आपके द्वारा उपयोग किए जाने वाले हर प्रकार के स्क्रॉल कंटेनर के साथ काम करता है - विंडो, एचटीएमएल एलिमेंट्स, एम्बेडेड आइफ्रेम, स्पॉन्ड चाइल्ड विंडो - और यह बहुत लचीला है कि यह क्या पता लगाता है ( पूर्ण या आंशिक दृश्यता , बॉर्डर बॉक्स या कंटेंट बॉक्स , कस्टम टॉलरेंस ज़ोन , आदि) )।

एक विशाल, ज्यादातर ऑटो-जनरेटेड टेस्ट सूट यह सुनिश्चित करता है कि यह विज्ञापित, क्रॉस-ब्राउज़र के रूप में काम करता है ।

यह एक शॉट देने के लिए यदि आप की तरह: jQuery.isInView । अन्यथा, आपको स्रोत कोड में प्रेरणा मिल सकती है, जैसे यहां ।