OffsetTop vs. jQuery.offset (). top

Question

I read that offsetLeft and offsetTop do not work properly in all browsers. jQuery.offset() provides an abstraction to provide the correct xbrowser value.

What I'm trying to do is get the coordinates where the element was pressed relative to the upper left corner of the element.

The problem is that jQuery.offset().top actually gives me a decimal value in FFX 3.6 (in IE and Chrome, both values ​​are the same).

This fiddle demonstrates the problem. If you click on the bottom image, jQuery.offset().top will return 327.5 and offsetTop will return 328.

I would like to think that offset() returns the correct value, and I should use it because it will work in all browsers. However, people obviously cannot click on the decimal points of pixels. Is the correct way to determine the true offset for the Math.round() offset that jQuery returns? Should I use offsetTop or some other method completely?

Answer 1

I think you're right in saying that people cannot click half the pixels, so personally I would use the jQuery rounded offset ...

Answer 2

Here is what the jQuery API Doc says about .offset() :

Get the current coordinates of the first element or set the coordinates of each element in the set of corresponding elements relative to the document .

Here is what the MDN Web API says about .offsetTop :

offsetTop returns the distance of the current element relative to the top of the offsetParent node.

Here is what jQuery v.1.11 .offset() basically does when getting coordinates:

 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 intuitively says how many pages have been scrolled
• docElem.scrollTop is a fallback for IE <9 (by the way, it is not supported in jQuery 2)
• docElem.clientTop - width of the upper border of the element (in this case, the document)
• elem.getBoundingClientRect() gets the coordinates relative to the document viewing area (see comments). It can return fractions, so this is the source of your error. It can also cause an error in IE <8 when the page is scaled. To avoid fractions, try calculating the position iteratively.

Conclusion

• If you want coordinates relative to the parent node , use element.offsetTop . Add element.scrollTop if you want to allow for parent scrolling. (or use jQuery .position () if you are a fan of this library)
• If you want coordinates relative to the viewport, use element.getBoundingClientRect().top . Add window.pageYOffset if you want to allow for scrolling of the document. You do not need to read the clientTop document if the document has no border (this is usually not the case), so you have a position regarding the document
• Subtract element.clientTop if you do not consider the border of the element as part of the element

Answer 3

Try the following: parseInt(jQuery.offset().top, 10)

Answer 4

It is possible that offset can be non-integer, using em as the unit of measure, relative font-sizes in % .

I also assume that offset may not be an integer if zoom not 100% , but it depends on how the browser handles the scaling.

Answer 5

You can use parseInt(jQuery.offset().top) to always use the Integer value (primitive - int ) in all browsers.