jQuery 尺寸位置 API 看似簡單，實戰中極易混淆：**`outerHeight(true)` vs `outerHeight()`**、**`position()` vs `offset()`**、**`scrollTop()` 到底量誰的高**。本文用**假想屏幕向上延伸模型**徹底釐清，附手繪圖解與代碼驗證邏輯。

一、尺寸 API 家族圖譜

以高度為例，寬度邏輯同理：

innerHeight() = padding-top + height + padding-bottom

outerHeight() = outerHeight(false)
            = border-top + padding-top + height + padding-bottom + border-bottom

outerHeight(true)
            = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

**易錯點**：`outerHeight()` 默認參數為 `false`（不含 margin），極易記反。

二、位置 API 雙雄：offset() vs position()

**核心區別只有一個：參考系不同**

API	參考系	適用場景
`offset()`	**文檔**	全局定位、彈窗居中、元素相對頁面座標
`position()`	**最近的有定位父級**	相對父容器定位、拖拽限制區域、局部佈局計算

無定位父級時，`position()` 退化為相對文檔，與 `offset()` 相同——**但代碼中必須明確語義，避免維護陷阱**。

三、scrollTop()/scrollLeft()：假想屏幕向上延伸模型

很多初學者不理解 `$(document).scrollTop()`。引入**假想屏幕向上延伸**概念：

• 文檔高度 > 視口高度時，文檔向上滾動進入視口
• `scrollTop()` = **已滾動進視口上方的文檔高度**
• 不限於 `window`：任何 `overflow: auto/scroll` + 固定高度的容器皆可用

圖中綠色區域即 `scrollTop()` 代表的長度——一眼看懂，永不忘記。

四、實戰驗證代碼片段

<div id="outer" style="margin:20px; border:5px solid red; padding:10px; width:300px; height:200px; overflow:auto;">
  <div id="inner" style="height:500px; background:linear-gradient(blue, green);"></div>
</div>

<script>
const $outer = $('#outer');
const $inner = $('#inner');

console.log('=== 尺寸 ===');
console.log('inner height:', $inner.innerHeight());      // 500
console.log('outer height:', $outer.innerHeight());      // 200 (可視區高度)
console.log('outer height(true):', $outer.outerHeight(true)); // 200+20+20+5+5=250

console.log('=== 位置 ===');
console.log('inner offset:', $inner.offset());           // {top: 35, left: 35} 相對文檔
console.log('inner position:', $inner.position());       // {top: 15, left: 15} 相對 #outer (有 relative 定位)

console.log('=== 滾動 ===');
$outer.scrollTop(100);
console.log('outer scrollTop:', $outer.scrollTop());     // 100
console.log('inner position after scroll:', $inner.position()); // {top: -85, left: 15} 相對父級可視區
</script>

五、避坑清單

1. 獲取隱藏元素尺寸 → 先 `css({display:'block', visibility:'hidden'})` 測量再還原
2. Box-sizing: border-box 時，`width()`/`height()` 返回 content-box 尺寸，需用 `outerWidth(true)` 獲取佔用空間
3. 動畫中讀取尺寸位置 → 用 `queue()` 回調或 `requestAnimationFrame` 確保佈局完成
4. iframe 跨域頁面 → `offset()`/`position()` 失效，需 `postMessage` 協同

結語

尺寸與位置 API 是前端佈局、動畫、拖拽、虛擬列表的基石。**圖解建立心智模型，代碼驗證鞏固肌肉記憶**——收藏本文，下次遇到「為什麼位置對不上」時，30 秒定位根因。