JQuery के साथ एक div की दृश्यमान ऊंचाई प्राप्त करें

Question 1

मुझे स्क्रॉल करने योग्य क्षेत्र के भीतर एक div की दृश्यमान ऊंचाई को पुनः प्राप्त करने की आवश्यकता है। मैं अपने आप को jQuery के साथ बहुत सभ्य मानता हूं, लेकिन यह मुझे पूरी तरह से फेंक रहा है।

मान लीजिए कि मैंने एक काले आवरण के भीतर एक लाल रंग की डिव लगाई है:

ऊपर ग्राफिक में, jQuery फ़ंक्शन 248 div के दृश्य भाग को लौटाएगा।

एक बार जब उपयोगकर्ता उपर्युक्त ग्राफिक के रूप में div के शीर्ष पर स्क्रॉल करता है, तो यह 296 रिपोर्ट करेगा।

अब, उपयोगकर्ता द्वारा पिछले बार स्क्रॉल किए जाने के बाद, यह फिर से 248 रिपोर्ट करेगा।

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

मेरे पास एक सिद्धांत है:

खिड़की की ऊंचाई प्राप्त करें
डिव की ऊंचाई प्राप्त करें
विंडो के शीर्ष से div की प्रारंभिक ऑफसेट करें
उपयोगकर्ता स्क्रॉल के रूप में ऑफसेट प्राप्त करें।
- यदि ऑफसेट सकारात्मक है, तो इसका मतलब है कि डिव का शीर्ष अभी भी दिखाई दे रहा है।
- यदि यह नकारात्मक है, तो div के शीर्ष को खिड़की से ग्रहण किया गया है। इस बिंदु पर, डिव या तो खिड़की की पूरी ऊंचाई तक ले जा सकता है, या डिव के नीचे दिखाई दे सकता है
- यदि div का निचला भाग दिखाई दे रहा है, तो उसके और खिड़की के नीचे के बीच के अंतर का पता लगाएं।

यह बहुत आसान लगता है, लेकिन मैं अभी इसके चारों ओर अपना सिर नहीं लपेट सकता। कल सुबह एक और दरार लूंगा; मुझे लगा कि आपमें से कुछ जीनियस मदद करने में सक्षम हो सकते हैं।

धन्यवाद!

अद्यतन: मैंने अपने दम पर यह पता लगाया, लेकिन लगता है कि नीचे दिए गए उत्तरों में से एक अधिक सुरुचिपूर्ण है, इसलिए मैं इसके बजाय इसका उपयोग करूंगा। जिज्ञासु के लिए, मैं यहाँ आया हूँ:

$(document).ready(function() {
    var windowHeight = $(window).height();
    var overviewHeight = $("#overview").height();
    var overviewStaticTop = $("#overview").offset().top;
    var overviewScrollTop = overviewStaticTop - $(window).scrollTop();
    var overviewStaticBottom = overviewStaticTop + $("#overview").height();
    var overviewScrollBottom = windowHeight - (overviewStaticBottom - $(window).scrollTop());
    var visibleArea;
    if ((overviewHeight + overviewScrollTop) < windowHeight) {
        // alert("bottom is showing!");
        visibleArea = windowHeight - overviewScrollBottom;
        // alert(visibleArea);
    } else {
        if (overviewScrollTop < 0) {
            // alert("is full height");
            visibleArea = windowHeight;
            // alert(visibleArea);
        } else {
            // alert("top is showing");
            visibleArea = windowHeight - overviewScrollTop;
            // alert(visibleArea);
        }
    }
});

Question 2

यहां एक त्वरित और गंदी अवधारणा है। यह मूल रूप offset().topसे खिड़की के शीर्ष के तत्व की तुलना करता है, और खिड़की offset().top + height()के नीचे तक:

function getVisible() {    
    var $el = $('#foo'),
        scrollTop = $(this).scrollTop(),
        scrollBot = scrollTop + $(this).height(),
        elTop = $el.offset().top,
        elBottom = elTop + $el.outerHeight(),
        visibleTop = elTop < scrollTop ? scrollTop : elTop,
        visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
    $('#notification').text(visibleBottom - visibleTop);
}

$(window).on('scroll resize', getVisible);

उदाहरण का बेड़ा

संपादित करें - छोटा अद्यतन भी जब विंडो का आकार बदला जा रहा है तो तर्क प्रदर्शन करें।

Question 3

व्यूपोर्ट में एक तत्व (ऊंचाई) px की मात्रा की गणना करें

फिडल डेमो

यह छोटा फ़ंक्शनpx एक तत्व की राशि लौटाएगा जो (ऊर्ध्वाधर) व्यूपोर्ट में दिखाई देता है :

function inViewport($el) {
    var elH = $el.outerHeight(),
        H   = $(window).height(),
        r   = $el[0].getBoundingClientRect(), t=r.top, b=r.bottom;
    return Math.max(0, t>0? Math.min(elH, H-t) : Math.min(b, H));
}

उपयोग की तरह:

$(window).on("scroll resize", function(){
  console.log( inViewport($('#elementID')) ); // n px in viewport
});

बस।

jQuery `.inViewport()`प्लगइन

jsFiddle डेमो

ऊपर से आप तर्क निकाल सकते हैं और इस तरह एक प्लगइन बना सकते हैं :

/**
 * inViewport jQuery plugin by Roko C.B.
 * http://stackoverflow.com/a/26831113/383904
 * Returns a callback function with an argument holding
 * the current amount of px an element is visible in viewport
 * (The min returned value is 0 (element outside of viewport)
 */
;(function($, win) {
  $.fn.inViewport = function(cb) {
     return this.each(function(i,el) {
       function visPx(){
         var elH = $(el).outerHeight(),
             H = $(win).height(),
             r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
         return cb.call(el, Math.max(0, t>0? Math.min(elH, H-t) : Math.min(b, H)));  
       }
       visPx();
       $(win).on("resize scroll", visPx);
     });
  };
}(jQuery, window));

उपयोग की तरह:

$("selector").inViewport(function(px) {
  console.log( px ); // `px` represents the amount of visible height
  if(px > 0) {
    // do this if element enters the viewport // px > 0
  }else{
    // do that if element exits  the viewport // px = 0
  }
}); // Here you can chain other jQuery methods to your selector

आपके चयनकर्ता गतिशील रूप से खिड़की को सुनेंगे scrollऔर resizeपहले तैयार कॉलबैक फ़ंक्शन तर्क डोम तैयार पर प्रारंभिक मूल्य भी लौटाएंगे px।

Question 4

ऊपर Rory के दृष्टिकोण का एक संस्करण है, सिवाय एक jQuery प्लगइन के रूप में कार्य करने के लिए। यह उस प्रारूप में अधिक सामान्य प्रयोज्यता हो सकती है। महान जवाब, रोरी - धन्यवाद!

$.fn.visibleHeight = function() {
    var elBottom, elTop, scrollBot, scrollTop, visibleBottom, visibleTop;
    scrollTop = $(window).scrollTop();
    scrollBot = scrollTop + $(window).height();
    elTop = this.offset().top;
    elBottom = elTop + this.outerHeight();
    visibleTop = elTop < scrollTop ? scrollTop : elTop;
    visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
    return visibleBottom - visibleTop
}

निम्नलिखित के साथ बुलाया जा सकता है:

$("#myDiv").visibleHeight();

JQuery के साथ एक div की दृश्यमान ऊंचाई प्राप्त करें

व्यूपोर्ट में एक तत्व (ऊंचाई) px की मात्रा की गणना करें

jQuery .inViewport()प्लगइन

jsFiddle

jQuery `.inViewport()`प्लगइन