精确尺寸与偏移计算：处理滚动和变换的影响

详解jQuery的width/height、innerWidth/outerWidth、offset/position方法，并讲解在CSS变换（transform）和滚动容器下的实际坐标获取。 · 难度：入门 · +10XP

精确尺寸与偏移计算：处理滚动和变换的影响

常见的尺寸教程只提.width()和.height()，但在实战中你会遇到滚动偏移、边框盒模型、以及CSS transform导致的定位偏差。本教程将对比.offset()（相对于文档）与.position()（相对于父元素）的行为，并演示当父元素有transform属性时，.offset()会给出相对于变换后的坐标，而position()依然是未变换的坐标。还会教你如何正确计算一个元素是否在视口内，包括滚动容器的父级。此外，将展示如何利用.innerHeight()和.outerHeight(true)获取包含padding和margin的完整高度，用于布局计算。

var $box = $('#transform-box');
// 即使父元素有transform，offset仍然返回文档坐标
var docPos = $box.offset();
// 但position受父元素变换影响
var parentPos = $box.position();
// 检测元素是否在视口内
function isInViewport($el) {
  var rect = $el[0].getBoundingClientRect();
  return rect.top < $(window).height() && rect.bottom > 0;
}