ब्राउज़र के व्यूपोर्ट के सापेक्ष किसी तत्व की शीर्ष स्थिति कैसे प्राप्त करें?

Question

मैं ब्राउज़र के व्यूपोर्ट के सापेक्ष एक तत्व की स्थिति प्राप्त करना चाहता हूं (वह व्यूपोर्ट जिसमें पृष्ठ प्रदर्शित होता है, न कि पूरा पृष्ठ)। यह जावास्क्रिप्ट में कैसे किया जा सकता है?

बहुत धन्यवाद

Comments

मुझे लगता है कि यह सवाल stackoverflow.com/questions/211703/… के समान है, जिसका वास्तव में अच्छा समाधान है।

— जकॉब रनगे

@JakobRunge, 2013 में "अच्छा" था?

— इयूलियन ओनोफ्रेई

किसी समाधान को स्वीकार करने पर विचार करें।

— इयूलियन ओनोफ्रेई

Answer 1

मौजूदा उत्तर अब पुराने हो चुके हैं। देशी getBoundingClientRect()पद्धति अब लगभग काफी समय से है, और यह वही करता है जो सवाल पूछता है। प्लस यह सभी ब्राउज़रों में समर्थित है (IE 5 सहित, ऐसा लगता है!)

से MDN पेज :

लौटाया गया मान एक TextRectangle ऑब्जेक्ट है, जिसमें बॉर्डर-बॉक्स का वर्णन करने वाले केवल-बाएँ, शीर्ष, दाएं और नीचे गुण होते हैं, पिक्सेल में, व्यूपोर्ट के शीर्ष-बाएँ के सापेक्ष शीर्ष-बाएँ के साथ ।

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

var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport, i.e. the window
var top = viewportOffset.top;
var left = viewportOffset.left;

Comments

ब्राउज़र ज़ूम (Android Chrome) का उपयोग करने पर यह सही तरीके से काम नहीं कर सकता है। @Rism से समाधान ( नीचे देखें ) इस मामले में काम करता है

— दिमित्री

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

— cakidnyc

सवाल ब्राउज़र की विंडो के सापेक्ष पूछ रहा है।

— दिमित्री डॉवोरनिकोव

@Denilson getBoundingClientRect().topमेरे IE11 में नहीं है यह 0. लौटाता है। क्या आपके पास कोई समाधान है।

— आरिफ

@ लाभ: क्षमा करें, लेकिन मैं आपके मुद्दे को पुन: पेश नहीं कर सकता। मैंने IE11 पर इसका परीक्षण किया और फिर भी परिणाम मिले: codepen.io/denilsonsa/pen/ypqyXj

— Denilson Sá Maia

Answer 2

मेरे मामले में, बस स्क्रॉलिंग के बारे में सुरक्षित होने के लिए, मैंने window.scroll को समीकरण में जोड़ा:

var element = document.getElementById('myElement');
var topPos = element.getBoundingClientRect().top + window.scrollY;
var leftPos = element.getBoundingClientRect().left + window.scrollX;

यह मुझे दस्तावेज़ पर तत्व की वास्तविक सापेक्ष स्थिति प्राप्त करने की अनुमति देता है, भले ही इसे स्क्रॉल किया गया हो।

Comments

क्या आप इसे घटाने के बजाय स्क्रॉल स्थिति को जोड़ना नहीं चाहते हैं?

— इयूलियन ओनोफ्रेई

मैंने उत्तर को उकेरा लेकिन फिर भी @ लुलियन ओनोफ्रेई सही है। कृपया संपादित करें।

— 15:00

@ फैबियो getBoundingClientRect().topमेरे आईई 11 में नहीं है यह 0. लौटाता है। क्या आपके पास कोई समाधान है।

— आरिफ़

@ window.scrollY || window.pageYOffsetसमर्थन में सुधार हो सकता है

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

@FabianvonEllerts :)

— आरिफ़

Answer 3

संपादित करें: पृष्ठ स्क्रॉलिंग के लिए कुछ कोड जोड़ें।

function findPos(id) {
    var node = document.getElementById(id);     
    var curtop = 0;
    var curtopscroll = 0;
    if (node.offsetParent) {
        do {
            curtop += node.offsetTop;
            curtopscroll += node.offsetParent ? node.offsetParent.scrollTop : 0;
        } while (node = node.offsetParent);

        alert(curtop - curtopscroll);
    }
}

आईडी तर्क उस तत्व की आईडी है जिसकी ऑफसेट आप चाहते हैं। एक quirksmode पोस्ट से अनुकूलित ।

Comments

आपके उत्तर के लिए धन्यवाद, लेकिन मुझे लगता है कि आपने मेरे प्रश्न को गलत समझा, मुझे पता है कि पृष्ठ के सापेक्ष किसी तत्व का शीर्ष कैसे प्राप्त किया जाए, जो मैं करने की कोशिश कर रहा हूं वह 'व्यूपोर्ट' (यानी ब्राउज़र विंडो) के सापेक्ष स्थान प्राप्त करने के लिए है। , दस्तावेज़ नहीं)

— वालिद Eissa

क्षमा करें, 'व्यूपोर्ट' के आपके उपयोग ने मुझे फेंक दिया। तो, आप कह रहे हैं कि आप ब्राउज़र क्रोम, बुकमार्क टूलबार, लोकेशन बार इत्यादि के लिए क्या चाहते हैं?

— डेरेक स्विंगले

नहीं, बस वह विंडो जिससे आप पृष्ठ देखते हैं। यदि पृष्ठ स्क्रॉल किया गया है तो यह दस्तावेज़ शीर्ष से अलग होगा, अन्यथा वे समान हैं।

— इलिसा

ओह ठीक है, मैं समझ गया। यकीन नहीं है कि कैसे करना है ... अगर मैं कुछ लेकर आता हूं तो अपने जवाब को संपादित करूंगा।

— डेरेक स्विंगली

मैं थोड़ा बदसूरत ऊपर कोड बनाया है, लेकिन यह काम करता है ... ऑफसेट का उपयोग करें। CrollTop

— डेरेक स्विंगले

Answer 4

var element =  document.querySelector('selector');
var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

Comments

यह दस्तावेज़ के शीर्ष से गणना करने के लिए लगता है, न कि व्यूपोर्ट

— स्कॉट लियोनार्ड

Answer 5

तुम कोशिश कर सकते हो:

node.offsetTop - window.scrollY

यह ओपेरा पर परिभाषित व्यूपोर्ट मेटा टैग के साथ काम करता है।

Comments

यदि मैं दस्तावेज़ीकरण को सही ढंग से समझता हूं , offsetTopतो निकटतम तैनात तत्व के सापेक्ष है। जो कि, पृष्ठ संरचना के आधार पर, मूल तत्व हो सकता है या नहीं भी हो सकता है।

— डेनिलसन सिया मिया

Answer 6

jQuery यह काफी सुरुचिपूर्ण ढंग से लागू करता है। यदि आप jQuery के स्रोत को देखते हैं offset, तो आप पाएंगे कि यह मूल रूप से कैसे लागू किया गया है:

var rect = elem.getBoundingClientRect();
var win = elem.ownerDocument.defaultView;

return {
    top: rect.top + win.pageYOffset,
    left: rect.left + win.pageXOffset
};

Answer 7

इस पृष्ठ पर फ़ंक्शन ब्राउज़र दृश्य पोर्ट के सापेक्ष पारित तत्व के शीर्ष, बाएं, ऊंचाई और चौड़ाई के निर्देशांक के साथ एक आयत लौटाएगा।

    localToGlobal: function( _el ) {
       var target = _el,
       target_width = target.offsetWidth,
       target_height = target.offsetHeight,
       target_left = target.offsetLeft,
       target_top = target.offsetTop,
       gleft = 0,
       gtop = 0,
       rect = {};

       var moonwalk = function( _parent ) {
        if (!!_parent) {
            gleft += _parent.offsetLeft;
            gtop += _parent.offsetTop;
            moonwalk( _parent.offsetParent );
        } else {
            return rect = {
            top: target.offsetTop + gtop,
            left: target.offsetLeft + gleft,
            bottom: (target.offsetTop + gtop) + target_height,
            right: (target.offsetLeft + gleft) + target_width
            };
        }
    };
        moonwalk( target.offsetParent );
        return rect;
}

Answer 8

function inViewport(element) {
    let bounds = element.getBoundingClientRect();
    let viewWidth = document.documentElement.clientWidth;
    let viewHeight = document.documentElement.clientHeight;

    if (bounds['left'] < 0) return false;
    if (bounds['top'] < 0) return false;
    if (bounds['right'] > viewWidth) return false;
    if (bounds['bottom'] > viewHeight) return false;

    return true;
}

स्रोत

Answer 9

सारे सवालों के जवाब देने के लिए धन्यवाद। ऐसा लगता है कि प्रोटोटाइप में पहले से ही एक फ़ंक्शन है जो ऐसा करता है (पृष्ठ (फ़ंक्शन))। फ़ंक्शन के स्रोत कोड को देखकर, मैंने पाया कि यह पहले पृष्ठ (यानी दस्तावेज़ शीर्ष) के सापेक्ष तत्व ऑफसेट स्थिति की गणना करता है, फिर स्क्रॉलटॉप को उससे घटाता है। अधिक विवरण के लिए प्रोटोटाइप का स्रोत कोड देखें।

Comments

अच्छा निर्णय। संभवत: किसी एक प्रमुख लाइब्रेरी के साथ जाना सबसे अच्छा है क्योंकि वे ब्राउज़रों में समान परिणाम देने की अधिक संभावना रखते हैं। यदि आप उत्सुक हैं, तो मेरे उत्तर की जांच करें। वहां का कोड ऐसा करेगा लेकिन मुझे नहीं पता कि यह ब्राउज़रों के बीच कैसा रहेगा।

— डेरेक स्विंगले

Answer 10

मैं btn1वेब पेज में मौजूद आईडी की एक तत्व मान रहा हूं , और यह भी कि jQuery शामिल है। इसने Chrome, FireFox, IE> = 9 और Edge के सभी आधुनिक ब्राउज़रों में काम किया है। jQuery का उपयोग केवल दस्तावेज़ के सापेक्ष स्थिति निर्धारित करने के लिए किया जा रहा है।

var screenRelativeTop =  $("#btn1").offset().top - (window.scrollY || 
                                            window.pageYOffset || document.body.scrollTop);

var screenRelativeLeft =  $("#btn1").offset().left - (window.scrollX ||
                                           window.pageXOffset || document.body.scrollLeft);

Comments

jQuery जावास्क्रिप्ट है। मेरा मानना ​​है कि आपका मतलब "100% वेनिला / शुद्ध जेएस नहीं है।"

— भूखमरी

हां, मेरा यही मतलब है।

— सुनील

Answer 11

कभी-कभी getBoundingClientRect()ऑब्जेक्ट का गुण मान IE के लिए 0 दिखाता है। उस स्थिति में आपको सेट करना होगाdisplay = 'block' तत्व के करना होगा। ऑफसेट प्राप्त करने के लिए आप सभी ब्राउज़र के लिए नीचे दिए गए कोड का उपयोग कर सकते हैं।

JQuery कार्यक्षमता बढ़ाएँ:

(function($) {
    jQuery.fn.weOffset = function () {
        var de = document.documentElement;
        $(this).css("display", "block");
        var box = $(this).get(0).getBoundingClientRect();
        var top = box.top + window.pageYOffset - de.clientTop;
        var left = box.left + window.pageXOffset - de.clientLeft;
        return { top: top, left: left };
    };
}(jQuery));

उपयोग :

var elementOffset = $("#" + elementId).weOffset();