दिलचस्प पोस्ट
नोडजे में समयक्षेत्र ऑफसेट कैसे उपयोग करें? Django SMTPAuthenticationError एक NumPy सरणी को एक NumPy सरणी में जोड़ें एंड्रॉइड एप्लिकेशन का पैकेज नाम कैसे बदलना है लॉज 4नेट प्रोग्रामेटिक रूप से स्क्रैच से कॉन्फ़िगर कैसे करें (कोई भी कॉन्फ़िग नहीं) क्या हम एक ईओफ़ चरित्र खुद लिख सकते हैं? सी # से सी + + डीएलएल और पीछे से स्ट्रिंग पासिंग – न्यूनतम उदाहरण MySQL में अगले ऑटो-इनेरमेंट आईडी कैसे प्राप्त करें I जावा में बेनामी (आंतरिक) वर्ग कैसे उपयोग किए जाते हैं? एंड्रॉइड टाइल बिटमैप उद्देश्य सी में हर 3 अंकों की संख्या में कैसे अल्पविराम जोड़ना है? कोको आटोलेआऊउट: सामग्री कम्प्रेशन प्रतिरोध प्राथमिकता बनाम सामग्री गले लगाते हैं मैं एसटीआईटी इकाई फ्रेमवर्क द्वारा उत्पन्न कैसे देखूं? सुपर () उठाता है "टाइप एरर: प्रकार होना चाहिए, क्लासबोज नहीं" नए-स्टाइल वर्ग के लिए Json.Net में system.enum में विशिष्ट enum का वर्णन करें

स्क्रॉलिंग के बाद तत्व दिखाई देने पर देखें

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

वेब के समाधान से एकत्रित समाधान "स्क्रॉलिंग के बाद तत्व दिखाई देने पर देखें"

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

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

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

 function isScrolledIntoView(el) { var elemTop = el.getBoundingClientRect().top; var elemBottom = el.getBoundingClientRect().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; } 

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

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

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

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

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

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

 var visibleY = function(el){ var rect = el.getBoundingClientRect(), top = rect.top, height = rect.height, el = el.parentNode; 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); // Check its within the document viewport return top <= document.documentElement.clientHeight; }; 

2016-03-26 को संपादित करें: मैंने पिछले तत्व को स्क्रॉल करने के लिए खाते का समाधान अपडेट किया है, इसलिए यह स्क्रॉल-योग्य कंटेनर के ऊपर से छिपा हुआ है

jQuery के Waypoints प्लगइन बहुत अच्छा है यहाँ।

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

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

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

मेरी ज़रूरत के लिए स्कॉट डाइडिंग के शांत कार्य को देखते हुए- इसका उपयोग यह जानने के लिए किया जाता है कि तत्व स्क्रीन पर बस स्क्रॉल कर रहा है यानी यह शीर्ष किनारे पर है

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

कैसा रहेगा

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

इसके बाद आप जो कुछ भी चाहते हैं, उसके बाद आप इस तरह के तत्व को देख सकते हैं

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

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

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

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

इसके लिए:

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

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

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


यहां 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/ ) एक लड़का जिसे जेम्स कहते हैं

इस का एक अच्छा उदाहरण यहाँ (नीचे स्क्रॉल करें):

http://www.bbc.co.uk/sport/0/olympics/2012/

मुझे 100% यकीन नहीं हो सकता है कि उदाहरण समान कोड का उपयोग करता है, लेकिन …

संपादित करें … मैंने 'एग्जिस्टिव्यू' नामक इनव्यू प्लगइन के लिए एक एक्सटेंशन भी लिखा है, जो एक ईवेंट को सक्रिय करता है जब तत्व पृष्ठ को छोड़ देता है। कोड में दिलचस्पी रखने वाला कोई भी मुझे प्रधान मंत्री बता सकता है, यदि संभव हो तो।

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

 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 

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

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

यह समाधान बिल्कुल यही है:

 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 में इसका परीक्षण कर रहा हूं।

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

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

 function isScrolledIntoView(el, holder) { var elemTop = el.getBoundingClientRect().top; var elemBottom = el.getBoundingClientRect().bottom; var elemHeight = el.getBoundingClientRect().height; var holderTop = holder.getBoundingClientRect().top; var holderBottom = holder.getBoundingClientRect().bottom; var isVisible; if (elemTop <= holderTop) { isVisible = !(holderTop - elemTop > elemHeight); } else { isVisible = !(elemBottom - holderBottom > elemHeight); } return isVisible; } 

JQuery के उपयोग:

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

इस महान उत्तर का निर्माण बंद करके, आप इसे आसान बना सकते हैं और 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 

मेरे पास मेरे आवेदन में ऐसी कोई विधि है, लेकिन यह 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) के लिए अच्छी तरह से काम करता है। एफएफ के साथ संगतता के लिए टिप्पणियां पढ़ें।

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

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

यहां 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 में देखें

मुझे स्क्रॉल करने योग्य डीआईवी कंटेनर के तत्वों में दृश्यता की जांच करने की आवश्यकता है I

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

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

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

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

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

मैं jQuery expr का उपयोग करना पसंद करता हूं

 jQuery.extend(jQuery.expr[':'], { inview: function (elem) { var t = $(elem); var offset = t.offset(); var win = $(window); var winST = win.scrollTop(); var elHeight = t.outerHeight(true); if ( offset.top > winST - elHeight && offset.top < winST + elHeight + win.height()) { return true; } return false; } }); 

तो आप इसे इस तरह से उपयोग कर सकते हैं

 $(".my-elem:inview"); //returns only element that is in view $(".my-elem").is(":inview"); //check if element is in view $(".my-elem:inview").length; //check how many elements are in view 

आप आसानी से इस तरह के कोड को scroll इवेंट फ़ंक्शन आदि में जोड़ सकते हैं ताकि उपयोगकर्ता इसे देख सकें।

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

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

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

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

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

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

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

आप jquery प्लगइन "ऑनस्क्रीन" का उपयोग करके यह जांच सकते हैं कि जब आप स्क्रॉल करते हैं तो तत्व वर्तमान व्यूपोर्ट में है या नहीं। प्लगइन चयनकर्ता के ": ऑनस्क्रीन" को सही पर सेट करता है जब स्क्रीन पर चयनकर्ता दिखाई देता है। यह प्लगइन के लिए लिंक है जिसे आप अपनी परियोजना में शामिल कर सकते हैं। " 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; } 

मैं यह देखने के लिए एक तरीका तलाश रहा था कि तत्व जल्दी ही देखने में है, इसलिए ऊपर दिए स्निपेट्स को बढ़ाकर मैं इसे करने में कामयाब रहा हूं। सोचा कि मैं इसे यहाँ छोड़ दूंगा अगर यह किसी की मदद करेगा

एल्म = वह तत्व है जिसे आप देखना चाहते हैं वह दृश्य में है

scrollElement = आप खिड़की या किसी अभिभावक तत्व को स्क्रॉल कर सकते हैं

ऑफसेट = यदि आप चाहते हैं कि यह आग लग जाए तो जब यह स्क्रीन 200px दूर होता है तो स्क्रीन पर 200 से आगे हो जाएंगे

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

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

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

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

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

एक उदाहरण के आधार पर यह पता लगाने के लिए कि एक तत्व 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; } 

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

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

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

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

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

सबसे पहले, खिड़की की शीर्ष स्थिति है: 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 वर्ग को जोड़ने या निकालने के लिए तर्क को चला सकते हैं, जिसे आप बाद में अपने सीएसएस में संक्रमण प्रभावों के साथ संभाल सकते हैं।

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