offset.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. define( [
  2. "./core",
  3. "./core/access",
  4. "./var/document",
  5. "./var/documentElement",
  6. "./var/isFunction",
  7. "./css/var/rnumnonpx",
  8. "./css/curCSS",
  9. "./css/addGetHookIf",
  10. "./css/support",
  11. "./var/isWindow",
  12. "./core/init",
  13. "./css",
  14. "./selector" // contains
  15. ], function( jQuery, access, document, documentElement, isFunction, rnumnonpx,
  16. curCSS, addGetHookIf, support, isWindow ) {
  17. "use strict";
  18. jQuery.offset = {
  19. setOffset: function( elem, options, i ) {
  20. var curPosition, curLeft, curCSSTop, curTop, curOffset, curCSSLeft, calculatePosition,
  21. position = jQuery.css( elem, "position" ),
  22. curElem = jQuery( elem ),
  23. props = {};
  24. // Set position first, in-case top/left are set even on static elem
  25. if ( position === "static" ) {
  26. elem.style.position = "relative";
  27. }
  28. curOffset = curElem.offset();
  29. curCSSTop = jQuery.css( elem, "top" );
  30. curCSSLeft = jQuery.css( elem, "left" );
  31. calculatePosition = ( position === "absolute" || position === "fixed" ) &&
  32. ( curCSSTop + curCSSLeft ).indexOf( "auto" ) > -1;
  33. // Need to be able to calculate position if either
  34. // top or left is auto and position is either absolute or fixed
  35. if ( calculatePosition ) {
  36. curPosition = curElem.position();
  37. curTop = curPosition.top;
  38. curLeft = curPosition.left;
  39. } else {
  40. curTop = parseFloat( curCSSTop ) || 0;
  41. curLeft = parseFloat( curCSSLeft ) || 0;
  42. }
  43. if ( isFunction( options ) ) {
  44. // Use jQuery.extend here to allow modification of coordinates argument (gh-1848)
  45. options = options.call( elem, i, jQuery.extend( {}, curOffset ) );
  46. }
  47. if ( options.top != null ) {
  48. props.top = ( options.top - curOffset.top ) + curTop;
  49. }
  50. if ( options.left != null ) {
  51. props.left = ( options.left - curOffset.left ) + curLeft;
  52. }
  53. if ( "using" in options ) {
  54. options.using.call( elem, props );
  55. } else {
  56. curElem.css( props );
  57. }
  58. }
  59. };
  60. jQuery.fn.extend( {
  61. // offset() relates an element's border box to the document origin
  62. offset: function( options ) {
  63. // Preserve chaining for setter
  64. if ( arguments.length ) {
  65. return options === undefined ?
  66. this :
  67. this.each( function( i ) {
  68. jQuery.offset.setOffset( this, options, i );
  69. } );
  70. }
  71. var rect, win,
  72. elem = this[ 0 ];
  73. if ( !elem ) {
  74. return;
  75. }
  76. // Return zeros for disconnected and hidden (display: none) elements (gh-2310)
  77. // Support: IE <=11 only
  78. // Running getBoundingClientRect on a
  79. // disconnected node in IE throws an error
  80. if ( !elem.getClientRects().length ) {
  81. return { top: 0, left: 0 };
  82. }
  83. // Get document-relative position by adding viewport scroll to viewport-relative gBCR
  84. rect = elem.getBoundingClientRect();
  85. win = elem.ownerDocument.defaultView;
  86. return {
  87. top: rect.top + win.pageYOffset,
  88. left: rect.left + win.pageXOffset
  89. };
  90. },
  91. // position() relates an element's margin box to its offset parent's padding box
  92. // This corresponds to the behavior of CSS absolute positioning
  93. position: function() {
  94. if ( !this[ 0 ] ) {
  95. return;
  96. }
  97. var offsetParent, offset, doc,
  98. elem = this[ 0 ],
  99. parentOffset = { top: 0, left: 0 };
  100. // position:fixed elements are offset from the viewport, which itself always has zero offset
  101. if ( jQuery.css( elem, "position" ) === "fixed" ) {
  102. // Assume position:fixed implies availability of getBoundingClientRect
  103. offset = elem.getBoundingClientRect();
  104. } else {
  105. offset = this.offset();
  106. // Account for the *real* offset parent, which can be the document or its root element
  107. // when a statically positioned element is identified
  108. doc = elem.ownerDocument;
  109. offsetParent = elem.offsetParent || doc.documentElement;
  110. while ( offsetParent &&
  111. ( offsetParent === doc.body || offsetParent === doc.documentElement ) &&
  112. jQuery.css( offsetParent, "position" ) === "static" ) {
  113. offsetParent = offsetParent.parentNode;
  114. }
  115. if ( offsetParent && offsetParent !== elem && offsetParent.nodeType === 1 ) {
  116. // Incorporate borders into its offset, since they are outside its content origin
  117. parentOffset = jQuery( offsetParent ).offset();
  118. parentOffset.top += jQuery.css( offsetParent, "borderTopWidth", true );
  119. parentOffset.left += jQuery.css( offsetParent, "borderLeftWidth", true );
  120. }
  121. }
  122. // Subtract parent offsets and element margins
  123. return {
  124. top: offset.top - parentOffset.top - jQuery.css( elem, "marginTop", true ),
  125. left: offset.left - parentOffset.left - jQuery.css( elem, "marginLeft", true )
  126. };
  127. },
  128. // This method will return documentElement in the following cases:
  129. // 1) For the element inside the iframe without offsetParent, this method will return
  130. // documentElement of the parent window
  131. // 2) For the hidden or detached element
  132. // 3) For body or html element, i.e. in case of the html node - it will return itself
  133. //
  134. // but those exceptions were never presented as a real life use-cases
  135. // and might be considered as more preferable results.
  136. //
  137. // This logic, however, is not guaranteed and can change at any point in the future
  138. offsetParent: function() {
  139. return this.map( function() {
  140. var offsetParent = this.offsetParent;
  141. while ( offsetParent && jQuery.css( offsetParent, "position" ) === "static" ) {
  142. offsetParent = offsetParent.offsetParent;
  143. }
  144. return offsetParent || documentElement;
  145. } );
  146. }
  147. } );
  148. // Create scrollLeft and scrollTop methods
  149. jQuery.each( { scrollLeft: "pageXOffset", scrollTop: "pageYOffset" }, function( method, prop ) {
  150. var top = "pageYOffset" === prop;
  151. jQuery.fn[ method ] = function( val ) {
  152. return access( this, function( elem, method, val ) {
  153. // Coalesce documents and windows
  154. var win;
  155. if ( isWindow( elem ) ) {
  156. win = elem;
  157. } else if ( elem.nodeType === 9 ) {
  158. win = elem.defaultView;
  159. }
  160. if ( val === undefined ) {
  161. return win ? win[ prop ] : elem[ method ];
  162. }
  163. if ( win ) {
  164. win.scrollTo(
  165. !top ? val : win.pageXOffset,
  166. top ? val : win.pageYOffset
  167. );
  168. } else {
  169. elem[ method ] = val;
  170. }
  171. }, method, val, arguments.length );
  172. };
  173. } );
  174. // Support: Safari <=7 - 9.1, Chrome <=37 - 49
  175. // Add the top/left cssHooks using jQuery.fn.position
  176. // Webkit bug: https://bugs.webkit.org/show_bug.cgi?id=29084
  177. // Blink bug: https://bugs.chromium.org/p/chromium/issues/detail?id=589347
  178. // getComputedStyle returns percent when specified for top/left/bottom/right;
  179. // rather than make the css module depend on the offset module, just check for it here
  180. jQuery.each( [ "top", "left" ], function( i, prop ) {
  181. jQuery.cssHooks[ prop ] = addGetHookIf( support.pixelPosition,
  182. function( elem, computed ) {
  183. if ( computed ) {
  184. computed = curCSS( elem, prop );
  185. // If curCSS returns percentage, fallback to offset
  186. return rnumnonpx.test( computed ) ?
  187. jQuery( elem ).position()[ prop ] + "px" :
  188. computed;
  189. }
  190. }
  191. );
  192. } );
  193. return jQuery;
  194. } );