jQuery को विंडो के सापेक्ष एक तत्व का स्थान मिलता है

Question

HTML DOM ID को देखते हुए, जावास्क्रिप्ट / JQuery में विंडो के सापेक्ष एक तत्व की स्थिति कैसे प्राप्त करें? यह दस्तावेज़ के सापेक्ष समान नहीं है और न ही माता-पिता को ऑफसेट करता है क्योंकि तत्व एक आइफ्रेम या कुछ अन्य तत्वों के अंदर हो सकता है। मुझे तत्व की आयत (जैसा कि स्थिति और आयाम में) का स्क्रीन स्थान प्राप्त करने की आवश्यकता है क्योंकि यह वर्तमान में प्रदर्शित किया जा रहा है। नकारात्मक मान स्वीकार्य है यदि तत्व वर्तमान में ऑफ-स्क्रीन है (बंद स्क्रॉल किया गया है)।

यह एक iPad (WebKit / WebView) एप्लिकेशन के लिए है। जब भी उपयोगकर्ता किसी विशेष लिंक पर टैप करता है UIWebView, तो मुझे एक पॉपओवर दृश्य खोलना चाहिए जो लिंक के बारे में अधिक जानकारी प्रदर्शित करता है। पॉपओवर दृश्य को एक तीर को प्रदर्शित करने की आवश्यकता होती है जो स्क्रीन के उस हिस्से पर वापस इंगित करता है जो इसे लागू करता है।

Answer 1

प्रारंभ में, तत्व की .offset स्थिति को पकड़ो और खिड़की के संबंध में इसकी सापेक्ष स्थिति की गणना करें

देखें :
1. ऑफसेट
2. स्क्रॉल
3. scrollTop

आप इस फील पर कोशिश कर सकते हैं

कोड की कुछ पंक्तियों का अनुसरण यह बताता है कि इसे कैसे हल किया जा सकता है

जब .scroll घटना की जाती है, तो हम विंडो ऑब्जेक्ट के संबंध में तत्व की सापेक्ष स्थिति की गणना करते हैं

$(window).scroll(function () {
    console.log(eTop - $(window).scrollTop());
});

जब स्क्रॉल ब्राउज़र में किया जाता है, तो हम उपरोक्त ईवेंट हैंडलर फ़ंक्शन को कॉल करते हैं

सांकेतिक टुकड़ा

---

function log(txt) {
  $("#log").html("location : <b>" + txt + "</b> px")
}

$(function() {
  var eTop = $('#element').offset().top; //get the offset top of the element
  log(eTop - $(window).scrollTop()); //position of the ele w.r.t window

  $(window).scroll(function() { //when window is scrolled
    log(eTop - $(window).scrollTop());
  });
});

#element {
  margin: 140px;
  text-align: center;
  padding: 5px;
  width: 200px;
  height: 200px;
  border: 1px solid #0099f9;
  border-radius: 3px;
  background: #444;
  color: #0099d9;
  opacity: 0.6;
}
#log {
  position: fixed;
  top: 40px;
  left: 40px;
  color: #333;
}
#scroll {
  position: fixed;
  bottom: 10px;
  right: 10px;
  border: 1px solid #000;
  border-radius: 2px;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>

<div id="element">Hello
  <hr>World</div>
<div id="scroll">Scroll Down</div>

Comments

स्क्रिप्ट के लिए धन्यवाद। यह डेस्कटॉप में काम करने लगता है, लेकिन iPad पर काम नहीं करता है। ऐसा लगता है कि $ (विंडो) .scrollTop () और $ (विंडो) .scrollLeft () iPad में अपडेट नहीं होता है। आप मेरे संस्करण को jsbin.com/ogiwu4/5 के

— adib

वे iPad पर अपडेट नहीं होते हैं क्योंकि विंडो स्वयं स्क्रॉल नहीं कर रही है - उपयोगकर्ता विंडो के अंदर स्क्रॉल कर रहा है। वैसे भी एक बेसिक वेबसाइट के मामले में, मोबाइल उपकरणों को लक्षित करने वाले एक के बारे में निश्चित नहीं है, शायद वहां अधिक विकल्प हैं।

— 1913

यह तब विफल होना चाहिए जब एक तत्व किसी अन्य स्क्रॉल करने योग्य तत्व के भीतर हो, ई। जी। <div>। आप केवल दस्तावेज़ स्क्रॉलिंग पर विचार करते हैं, लेकिन अन्य तत्व स्क्रॉलिंग पर नहीं।

— योनी

Answer 2

बाउंडिंग बॉक्स का प्रयास करें। यह आसान है:

var leftPos  = $("#element")[0].getBoundingClientRect().left   + $(window)['scrollLeft']();
var rightPos = $("#element")[0].getBoundingClientRect().right  + $(window)['scrollLeft']();
var topPos   = $("#element")[0].getBoundingClientRect().top    + $(window)['scrollTop']();
var bottomPos= $("#element")[0].getBoundingClientRect().bottom + $(window)['scrollTop']();

Comments

getBoundingClientRect () इस समस्या का उत्तर है। साभार प्रोगामर

— व्लाद लेगो

यह अच्छा काम किया। मुझे केवल आपके स्क्रॉललैट और स्क्रॉलटॉप के अलावा, मेरी स्क्रॉल को ठीक करने के लिए कुछ कोड को शामिल करना था: topPos = topPos - $ (window) .scrollTop (); leftPos = leftPos - $ (window) .scrollLeft (); rightPos = rightPos - $ (विंडो) .scrollTop (); bottomPos = bottomPos - $ (विंडो) .scrollLeft ();

— सीजर

जिस दिन लोग चीजों को अच्छी उपयोगी विधि से लपेटना सीखेंगे

— mmm

@ नोल्डोरिन आईई / एज का समर्थन मुझे अच्छा लगता है: caniuse.com/#feat=getboundingclientrect

— prograhammer

@prograhammer मेरा बुरा, तुम सही हो। मैंने इसे किसी वेबसाइट पर पढ़ा और इसका शब्द अंकित मूल्य पर लिया ... पता चला कि यह गलत था (या कम से कम पुराने IE पर काम नहीं करता है)।

— नोल्डोरिन

Answer 3

function getWindowRelativeOffset(parentWindow, elem) {
        var offset = {
            left : 0,
            top : 0
        };
        // relative to the target field's document
        offset.left = elem.getBoundingClientRect().left;
        offset.top = elem.getBoundingClientRect().top;
        // now we will calculate according to the current document, this current
        // document might be same as the document of target field or it may be
        // parent of the document of the target field
        var childWindow = elem.document.frames.window;
        while (childWindow != parentWindow) {
            offset.left = offset.left + childWindow.frameElement.getBoundingClientRect().left;
            offset.top = offset.top + childWindow.frameElement.getBoundingClientRect().top;
            childWindow = childWindow.parent;
        }
        return offset;
    };

आप इसे इस तरह कह सकते हैं

getWindowRelativeOffset(top, inputElement);

मैं अपनी आवश्यकता के अनुसार केवल IE के लिए ध्यान केंद्रित करता हूं लेकिन अन्य ब्राउज़रों के लिए भी ऐसा ही किया जा सकता है

Answer 4

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

अन्यथा यदि आप स्वयं ऐसा करना चाहते हैं तो आप jQuery का उपयोग कर सकते हैं .position()। Http://api.jquery.com/position/ के बारे .position()में अधिक जानकारी

$("#element").position(); ऑफसेट अभिभावक के सापेक्ष किसी तत्व की वर्तमान स्थिति लौटाएगा।

JQuery भी है .offset (); जो दस्तावेज़ के सापेक्ष स्थिति वापस कर देगा।

Comments

यह वास्तव में एक टूलटिप नहीं है, लेकिन एनोटेशन जोड़ने के लिए एक देशी UI विजेट खोलने के लिए।

— अडिब

Answer 5

टी एल; डॉ

headroom_by_jQuery = $('#id').offset().top - $(window).scrollTop();

headroom_by_DOM = $('#id')[0].getBoundingClientRect().top;   // if no iframe

.getBoundingClientRect () सार्वभौमिक प्रतीत होता है । .offset () और .scrollTop () jQuery 1.2 के बाद से समर्थित है। धन्यवाद @ user372551 और @prograhammer एक iframe में DOM का उपयोग करने के लिए @ ImranAnsari का समाधान देखें ।

Answer 6

    function trbl(e, relative) {
            var r = $(e).get(0).getBoundingClientRect(); relative = $(relative);

            return {
                    t : r.top    + relative['scrollTop'] (),
                    r : r.right  + relative['scrollLeft'](),
                    b : r.bottom + relative['scrollTop'] (),
                    l : r.left   + relative['scrollLeft']() 

            }
    }

    // Example
    trbl(e, window);

Answer 7

विंडो के सापेक्ष एक तत्व का स्थान प्राप्त करने के लिए यह प्रयास करें।

        $("button").click(function(){
            var offset = $("#simplebox").offset();
            alert("Current position of the box is: (left: " + offset.left + ", top: " + offset.top + ")");
        });

    #simplebox{
        width:150px;
        height:100px;
        background: #FBBC09;
        margin: 150px 100px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Get Box Position</button>
    <p><strong>Note:</strong> Play with the value of margin property to see how the jQuery offest() method works.</p>
    <div id="simplebox"></div>

और देखें @ jQuery के साथ दस्तावेज़ के सापेक्ष एक तत्व की स्थिति प्राप्त करें