यह जांचने के लिए कि कोई तत्व jquery

Question

के साथ उपयोगकर्ता के दृश्य में है या नहीं, मेरे पास मेरी खिड़की में एक बहुत बड़ा ड्रैगगेबल div है। यह div में एक छोटी विंडो है।

<div id="draggable-area" style="width:500px;height:500px;overflow:hidden"> 
<div id="draggable" style="width:5000px;height:5000px"> 
    <ul> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     .... 
    </ul> 
    </div> 
</div> 

मुझे कैसे पता कर सकते हैं अगर li तत्व उपयोगकर्ता व्यूपोर्ट (मैं वास्तव में दिखाई मतलब है, अतिप्रवाह क्षेत्र में नहीं) में दिख रहा है?

Answer 1

this plugin

पर एक नजर है यह आप अगर एक तत्व वर्तमान veiwport में है जांच करने के लिए निम्नलिखित चयनकर्ताओं

$(":in-viewport") 
$(":below-the-fold") 
$(":above-the-top") 
$(":left-of-screen") 
$(":right-of-screen") 

Answer 2

करने के लिए विकल्प दे:

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

(Source)

अधिक मजबूत के लिए विधि, मैं Viewport Selectors की सलाह देते हैं, जिससे आप बस ऐसा करने की अनुमति:

$("#elem:in-viewport") 

Answer 3

मेरे समाधान दिया कोड उदाहरण उपयोग कर रहा है, और यह आप कैसे निर्धारित करने के लिए li तत्व दिखाई दे रहा है की एक समग्र विचार दिखाएगा। jsFiddle देखें जिसमें आपके प्रश्न से कोड शामिल है।

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

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

Answer 4

https://github.com/sakabako/scrollMonitor

var scrollMonitor = require("./scrollMonitor"); // if you're not using require, you can use the scrollMonitor global. 
var myElement = document.getElementById("itemToWatch"); 

var elementWatcher = scrollMonitor.create(myElement); 

elementWatcher.enterViewport(function() { 
    console.log('I have entered the viewport'); 
}); 
elementWatcher.exitViewport(function() { 
    console.log('I have left the viewport'); 
}); 

elementWatcher.isInViewport - true if any part of the element is visible, false if not. 
elementWatcher.isFullyInViewport - true if the entire element is visible [1]. 
elementWatcher.isAboveViewport - true if any part of the element is above the viewport. 
elementWatcher.isBelowViewport - true if any part of the element is below the viewport. 

Answer 5

मैं (चेक एक तत्व ध्यान में रखते हुए कम से कम आंशिक है कि क्या) कोड निम्न का उपयोग कर रहा हूँ:

var winSize; 

function getWindowSize() { 
      var winW,WinH = 0; 
      if (document.body && document.body.offsetWidth) { 
       winW = document.body.offsetWidth; 
       winH = document.body.offsetHeight; 
      } 
      if (document.compatMode == 'CSS1Compat' && 
       document.documentElement && 
       document.documentElement.offsetWidth) { 
       winW = document.documentElement.offsetWidth; 
       winH = document.documentElement.offsetHeight; 
      } 
      if (window.innerWidth && window.innerHeight) { 
       winW = window.innerWidth; 
       winH = window.innerHeight; 
      } 
      return {w:winW, h:winH}; 
     } 

winSize = getWindowSize();  

function inView(element) { 
       var box = element.getBoundingClientRect(); 
       if ((box.bottom < 0) || (box.top > winSize.h)){ 
        return false; 
       } 
       return true; 
      }