व्यूपोर्ट के सापेक्ष तत्व की स्थिति प्राप्त करने के लिए jquery का उपयोग करना

Question

व्यूपोर्ट (दस्तावेज़ के बजाय) के सापेक्ष पृष्ठ पर एक तत्व की स्थिति प्राप्त करने का उचित तरीका क्या है। jQuery.offsetसमारोह आशाजनक लग रहा था:

दस्तावेज़ के सापेक्ष, पहले तत्व के वर्तमान निर्देशांक प्राप्त करें, या मिलान किए गए तत्वों के सेट में हर तत्व के निर्देशांक सेट करें।

लेकिन यह दस्तावेज़ के सापेक्ष है। क्या कोई समतुल्य विधि है जो व्यूपोर्ट के सापेक्ष ऑफसेट लौटाती है?

Comments

ध्यान दें: @Igor G का जवाब देखें ...

— कार्ल स्मिथ

डीए के लिए, आपको वास्तव में इगोर जी के उत्तर को स्वीकार करना चाहिए, यह एक जीवन रक्षक है!

— विंसेंट डूप्रेज़

Answer 1

आयाम प्लगइन में देखें, विशेष रूप से scrollTop()/ scrollLeft()। जानकारी http://api.jquery.com/scrollTop पर देखी जा सकती है ।

Comments

मैं एक और प्लगइन का उपयोग नहीं करना चाहता था, लेकिन $ (विंडो) .scrollTop () बिल्कुल वही है जो मुझे चाहिए था! धन्यवाद!

— डीए।

आयाम प्लगइन अब jQuery कोर का एक हिस्सा है। ViewPort प्लगइन भी उपयोगी हो सकता है: appelsiini.net/projects/viewport

— स्ट्रिपिंगवर्यर

Answer 2

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

element.getBoundingClientRect(); // Get position in viewport coordinates

हर जगह समर्थन किया।

Comments

यह अविश्वसनीय है कि यह विधि IE5 द्वारा जोड़ा गया था ... जब कुछ अच्छा होता है, तो अच्छा होता है!

— रॉय रिओजस

यह पहली बार में बहुत अच्छा लग रहा था, लेकिन यह मोबाइल सफारी 7 पर ज़ूम करने वाले उपयोगकर्ता के लिए खाता नहीं है

— MyNameIsKo

नवीनतम फ़ायरफ़ॉक्स द्वारा समर्थित नहीं हैgetBoundingClientRect is not a function

— user007

@ user007 मैं पुष्टि करता हूं कि यह नवीनतम फ़ायरफ़ॉक्स द्वारा समर्थित है।

— एड्रियेंडनेट

शानदार उत्तर, और इसे सरलता से बनाने के लिए इसे इस तरह से करें: $('#myElement')[0].getBoundingClientRect().top(या कोई अन्य स्थिति)

— गिलाउम अरलुइसन

Answer 3

पृष्ठ की ऊँचाई और स्क्रॉल मात्रा (x, y) को (फूला हुआ) आयाम प्लगइन के उपयोग के बिना प्राप्त करने के लिए दो कार्य हैं:

// getPageScroll() by quirksmode.com
function getPageScroll() {
    var xScroll, yScroll;
    if (self.pageYOffset) {
      yScroll = self.pageYOffset;
      xScroll = self.pageXOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {
      yScroll = document.documentElement.scrollTop;
      xScroll = document.documentElement.scrollLeft;
    } else if (document.body) {// all other Explorers
      yScroll = document.body.scrollTop;
      xScroll = document.body.scrollLeft;
    }
    return new Array(xScroll,yScroll)
}

// Adapted from getPageSize() by quirksmode.com
function getPageHeight() {
    var windowHeight
    if (self.innerHeight) { // all except Explorer
      windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
      windowHeight = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
      windowHeight = document.body.clientHeight;
    }
    return windowHeight
}

Comments

ये जबरदस्त है। बहुत उपयोगी।

— जिमी

जिज्ञासा से बाहर, आपने इस मामले में खिड़की के बजाय "स्व" संपत्ति का उपयोग क्यों किया?

— dkugappi

@Denis stackoverflow.com/questions/3638887/...

— e2-E4

Answer 4

jQuery.offsetजरूरतों के साथ जोड़ा जा करने के लिए scrollTopऔर scrollLeftइस चित्र में दिखाया गया है:

डेमो:

function getViewportOffset($e) {
  var $window = $(window),
    scrollLeft = $window.scrollLeft(),
    scrollTop = $window.scrollTop(),
    offset = $e.offset(),
    rect1 = { x1: scrollLeft, y1: scrollTop, x2: scrollLeft + $window.width(), y2: scrollTop + $window.height() },
    rect2 = { x1: offset.left, y1: offset.top, x2: offset.left + $e.width(), y2: offset.top + $e.height() };
  return {
    left: offset.left - scrollLeft,
    top: offset.top - scrollTop,
    insideViewport: rect1.x1 < rect2.x2 && rect1.x2 > rect2.x1 && rect1.y1 < rect2.y2 && rect1.y2 > rect2.y1
  };
}
$(window).on("load scroll resize", function() {
  var viewportOffset = getViewportOffset($("#element"));
  $("#log").text("left: " + viewportOffset.left + ", top: " + viewportOffset.top + ", insideViewport: " + viewportOffset.insideViewport);
});

body { margin: 0; padding: 0; width: 1600px; height: 2048px; background-color: #CCCCCC; }
#element { width: 384px; height: 384px; margin-top: 1088px; margin-left: 768px; background-color: #99CCFF; }
#log { position: fixed; left: 0; top: 0; font: medium monospace; background-color: #EEE8AA; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- scroll right and bottom to locate the blue square -->
<div id="element"></div>
<div id="log"></div>

Comments

यह मेरे लिए बहुत काम आया, लेकिन मैं यह निर्धारित करने के लिए उपयोग कर रहा था कि क्या टूलटिप सीमा से बाहर जा रहा है, इसलिए मैंने नीचे और सही मानों को शामिल करने के लिए संशोधित किया है: jsfiddle.net/EY6Rk/21

— जॉर्डन

यह बिल्कुल, किसी भी मामले में, सही उत्तर है। अन्य सभी के पास माउस / स्क्रॉल डेल्टा कॉन्फ़िगरेशन, ब्राउज़र, ओबज लोकेशन आदि के आधार पर मुद्दे हैं

— पेड्रो फेरेरा

Answer 5

यहां एक फ़ंक्शन है जो व्यूपोर्ट के भीतर एक तत्व की वर्तमान स्थिति की गणना करता है:

/**
 * Calculates the position of a given element within the viewport
 *
 * @param {string} obj jQuery object of the dom element to be monitored
 * @return {array} An array containing both X and Y positions as a number
 * ranging from 0 (under/right of viewport) to 1 (above/left of viewport)
 */
function visibility(obj) {
    var winw = jQuery(window).width(), winh = jQuery(window).height(),
        elw = obj.width(), elh = obj.height(),
        o = obj[0].getBoundingClientRect(),
        x1 = o.left - winw, x2 = o.left + elw,
        y1 = o.top - winh, y2 = o.top + elh;

    return [
        Math.max(0, Math.min((0 - x1) / (x2 - x1), 1)),
        Math.max(0, Math.min((0 - y1) / (y2 - y1), 1))
    ];
}

वापसी मानों की गणना इस प्रकार की जाती है:

उपयोग:

visibility($('#example'));  // returns [0.3742887830933581, 0.6103752759381899]

डेमो:

function visibility(obj) {var winw = jQuery(window).width(),winh = jQuery(window).height(),elw = obj.width(),
    elh = obj.height(), o = obj[0].getBoundingClientRect(),x1 = o.left - winw, x2 = o.left + elw, y1 = o.top - winh, y2 = o.top + elh; return [Math.max(0, Math.min((0 - x1) / (x2 - x1), 1)),Math.max(0, Math.min((0 - y1) / (y2 - y1), 1))];
}
setInterval(function() {
  res = visibility($('#block'));
  $('#x').text(Math.round(res[0] * 100) + '%');
  $('#y').text(Math.round(res[1] * 100) + '%');
}, 100);

#block { width: 100px; height: 100px; border: 1px solid red; background: yellow; top: 50%; left: 50%; position: relative;
} #container { background: #EFF0F1; height: 950px; width: 1800px; margin-top: -40%; margin-left: -40%; overflow: scroll; position: relative;
} #res { position: fixed; top: 0; z-index: 2; font-family: Verdana; background: #c0c0c0; line-height: .1em; padding: 0 .5em; font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="res">
  <p>X: <span id="x"></span></p>
  <p>Y: <span id="y"></span></p>
</div>
<div id="container"><div id="block"></div></div>

Answer 6

मैंने पाया कि cballou द्वारा जवाब अब जनवरी 2014 के अनुसार फ़ायरफ़ॉक्स में काम नहीं कर रहा था। विशेष रूप से, if (self.pageYOffset)क्लाइंट ने सही स्क्रॉल किया था , तो ट्रिगर नहीं किया था, लेकिन नीचे नहीं - क्योंकि 0यह एक गलत नंबर है। यह थोड़ी देर के लिए चल पाता चला गया क्योंकि फ़ायरफ़ॉक्स समर्थित document.body.scrollLeft/ Top, लेकिन यह नहीं रह गया है (फ़ायरफ़ॉक्स 26.0 पर) मेरे लिए काम कर रहा है।

यहाँ मेरा संशोधित समाधान है:

var getPageScroll = function(document_el, window_el) {
  var xScroll = 0, yScroll = 0;
  if (window_el.pageYOffset !== undefined) {
    yScroll = window_el.pageYOffset;
    xScroll = window_el.pageXOffset;
  } else if (document_el.documentElement !== undefined && document_el.documentElement.scrollTop) {
    yScroll = document_el.documentElement.scrollTop;
    xScroll = document_el.documentElement.scrollLeft;
  } else if (document_el.body !== undefined) {// all other Explorers
    yScroll = document_el.body.scrollTop;
    xScroll = document_el.body.scrollLeft;
  }
  return [xScroll,yScroll];
};

FF26, Chrome 31, IE11 में परीक्षण और कार्य करना। लगभग निश्चित रूप से उन सभी के पुराने संस्करणों पर काम करता है।