ऑफसेटटॉप बनाम jQuery.offset ()। शीर्ष

Question 1

मैंने पढ़ा है कि offsetLeftऔर offsetTopसभी ब्राउज़रों में ठीक से काम नहीं करते हैं। jQuery.offset()इसे सही मान xbrowser प्रदान करने के लिए एक अमूर्तता प्रदान करना चाहिए।

मैं जो करने की कोशिश कर रहा हूं वह निर्देशांक प्राप्त करने के लिए है जहां एक तत्व को तत्व के शीर्ष-बाएं के सापेक्ष क्लिक किया गया था।

समस्या यह है कि jQuery.offset().topवास्तव में मुझे FFX 3.6 में एक दशमलव मान दिया जा रहा है (IE और क्रोम में, दो मान मेल खाते हैं)।

यह फिडेल इस मुद्दे को प्रदर्शित करता है। यदि आप नीचे की छवि पर क्लिक करते हैं, तो jQuery.offset().top327.5 लौटाता है, लेकिन offsetTop328 देता है।

मैं यह सोचना चाहूंगा कि offset()यह सही मूल्य दे रहा है और मुझे इसका उपयोग करना चाहिए क्योंकि यह ब्राउज़रों में काम करेगा। हालाँकि, लोग स्पष्ट रूप से पिक्सल के दशमलव पर क्लिक नहीं कर सकते हैं। क्या सही तरीका है Math.round()कि jQuery वापस आ रही है ऑफसेट करने के लिए निर्धारित करने के लिए? क्या मुझे offsetTopइसके बजाय, या किसी अन्य तरीके का उपयोग करना चाहिए ?

Question 2

मुझे लगता है कि आप यह कहते हुए सही हैं कि लोग आधे पिक्सेल पर क्लिक नहीं कर सकते, इसलिए व्यक्तिगत रूप से, मैं गोल jQuery ऑफसेट का उपयोग करूंगा ...

Question 3

इस jQuery एपीआई डॉक्टर के बारे में क्या कहते हैं .offset():

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

यह क्या है MDN वेब एपीआई के बारे में कहते हैं .offsetTop:

ऑफसेटटॉप नोड के शीर्ष के सापेक्ष वर्तमान तत्व की दूरी देता है

यह वही है जो jQuery v.1.11 .offset()मूल रूप से कोर्डर्स प्राप्त करते समय करता है:

var box = { top: 0, left: 0 };

// BlackBerry 5, iOS 3 (original iPhone)
if ( typeof elem.getBoundingClientRect !== strundefined ) {
  box = elem.getBoundingClientRect();
}
win = getWindow( doc );
return {
  top: box.top  + ( win.pageYOffset || docElem.scrollTop )  - ( docElem.clientTop  || 0 ),
  left: box.left + ( win.pageXOffset || docElem.scrollLeft ) - ( docElem.clientLeft || 0 )
};

pageYOffset सहजता से कहता है कि पेज को कितना स्क्रॉल किया गया था
docElem.scrollTop IE <9 के लिए गिरावट है (जो jQuery 2 में असमर्थित BTW हैं)
docElem.clientTop किसी तत्व की शीर्ष सीमा की चौड़ाई है (इस मामले में दस्तावेज़)
elem.getBoundingClientRect()~~दस्तावेज़~~ व्यूपोर्ट के सापेक्ष कोर्ड्स मिलते हैं (टिप्पणियां देखें)। यह अंश मान लौटा सकता है, इसलिए यह आपके बग का स्रोत है। यह भी आईई <8 में एक बग के कारण हो सकता है जब पेज जूम है। अंश मूल्यों से बचने के लिए स्थिति की गणना करने के लिए प्रयास iteratively

निष्कर्ष

यदि आप मूल नोड के सापेक्ष कोर्ड चाहते हैं , तो उपयोग करें element.offsetTop। element.scrollTopयदि आप पेरेंट स्क्रॉलिंग को ध्यान में रखना चाहते हैं तो जोड़ें । (या jQuery का उपयोग करें। प्रस्ताव () यदि आप उस पुस्तकालय के प्रशंसक हैं)
यदि आप व्यूपोर्ट के उपयोग के सापेक्ष कोर्ड चाहते हैं element.getBoundingClientRect().top। window.pageYOffsetयदि आप दस्तावेज़ को स्क्रॉल करना चाहते हैं, तो उसे जोड़ें । clientTopयदि दस्तावेज़ की कोई सीमा नहीं है, तो आपको दस्तावेज़ को घटाने की आवश्यकता नहीं है (आमतौर पर ऐसा नहीं होता है), इसलिए आपके पास दस्तावेज़ के सापेक्ष स्थिति है
element.clientTopयदि आप तत्व बॉर्डर को तत्व का हिस्सा नहीं मानते हैं तो घटाएं

Question 4

इसे इस्तेमाल करे: parseInt(jQuery.offset().top, 10)

Question 5

यह संभव है कि मापक इकाई के रूप में offsetउपयोग करते हुए, एक गैर-पूर्णांक हो सकता है ।emfont-sizes%

मैं यह भी बताता हूं कि offsetजब zoomयह नहीं होता है तो यह पूरी संख्या में हो सकता है 100%लेकिन यह निर्भर करता है कि ब्राउज़र स्केलिंग कैसे संभालता है।

Question 6

आप सभी ब्राउज़रों में parseInt(jQuery.offset().top)हमेशा इंटेगर (आदिम - int) मान का उपयोग करने के लिए उपयोग कर सकते हैं ।