2.4 尺寸与位置 API尺寸与位置 API 是前端实现布局计算、滚动交互、元素定位的核心基础能力广泛应用于懒加载、吸顶导航、拖拽交互、滚动动画等业务场景。不同 API 对应不同的参考坐标系与尺寸范围分别对应元素整体、客户区、滚动区等不同维度准确区分各 API 的边界与含义是避免布局计算偏差、交互位置错误的关键。2.4.1 元素几何信息getBoundingClientRectgetBoundingClientRect() 是获取元素几何信息的标准方法返回元素的尺寸及其相对于 \\浏览器视口viewport\\的位置信息是元素位置判断、视口检测的首选 API。一、基础语法与返回值const rect element.getBoundingClientRect();返回一个 DOMRect 只读对象包含 8 个核心属性属性含义left元素左边界距离视口左边界的像素距离top元素上边界距离视口上边界的像素距离right元素右边界距离视口左边界的像素距离bottom元素下边界距离视口上边界的像素距离x等同于 left元素左上角的视口水平坐标y等同于 top元素左上角的视口垂直坐标width元素的整体宽度height元素的整体高度二、核心特点尺寸计算范围width / height 包含元素的内容区 内边距 边框与 offsetWidth / offsetHeight 尺寸一致不包含外边距。参考系为视口所有位置属性均相对于浏览器可视视口页面滚动后数值会实时变化。精确浮点值现代浏览器会返回精确的浮点像素值支持亚像素级别的位置计算。触发回流调用该方法会强制浏览器计算最新的布局信息频繁调用如滚动事件中高频调用可能引发性能问题。三、典型应用判断元素是否在视口内function isInViewport(element) { const rect element.getBoundingClientRect(); return ( rect.top window.innerHeight rect.bottom 0 rect.left window.innerWidth rect.right 0 ); }2.4.2 偏移尺寸offsetWidth/offsetHeight、offsetTop/offsetLeftoffset 系列属性以 \\offsetParent最近定位祖先元素\\为参考坐标系描述元素自身的完整布局尺寸与相对偏移是元素相对父级定位计算的核心依据。一、尺寸属性offsetWidth /offsetHeight表示元素的完整布局尺寸包含元素的所有可视部分计算公式内容区宽度 左右内边距 左右边框宽度不包含外边距margin不包含滚动条占用空间// 获取元素完整布局宽度const totalWidth element.offsetWidth;二、位置属性offsetTop /offsetLeft表示元素左上角相对于其 offsetParent 左上角的偏移距离。offsetTop元素上边界到 offsetParent 上边界的垂直距离offsetLeft元素左边界到 offsetParent 左边界的水平距离三、关键概念offsetParentoffsetParent 是偏移量的参考基准指距离当前元素最近的、position 属性不为 static 的祖先元素若所有祖先均为静态定位则参考基准为 body 元素。注意表格单元格、固定定位元素等特殊场景下offsetParent 的判定会有差异固定定位元素的 offsetParent 为 null。四、核心特点不受页面滚动影响相对于祖先元素的偏移是固定布局值不会随页面滚动改变。返回整数值所有 offset 属性均返回整数像素值浏览器自动取整。只读属性只能读取无法直接赋值修改修改需通过样式操作。五、适用场景计算元素相对于父容器的相对位置获取元素完整的布局尺寸含边框拖拽、悬浮层等相对父级的交互定位计算2.4.3 客户区尺寸clientWidth/clientHeight、clientTop/clientLeftclient 系列描述元素的客户区域即元素内部可容纳内容的区域不包含边框与滚动条代表元素的内部可用空间。一、尺寸属性clientWidth /clientHeight表示元素客户区的尺寸即内容区 内边距的大小计算公式内容区宽度 左右内边距不包含边框border、外边距margin也不包含垂直滚动条占用的宽度// 获取元素内部可用内容宽度 const contentWidth element.clientWidth;二、位置属性clientTop /clientLeft表示元素客户区相对于元素自身左上角的偏移本质上就是元素的边框厚度clientTop元素上边框的宽度clientLeft元素左边框的宽度注意如果元素有滚动条滚动条默认绘制在边框内侧、客户区外侧因此 client 尺寸不包含滚动条空间。三、核心特点聚焦内部可用空间代表元素内部可放置内容的实际区域是内容排版的有效范围。不受滚动影响仅和元素自身结构相关与内容滚动位置无关。只读整数返回整数像素值只读不可写。四、适用场景计算元素内部内容的可用空间排除边框影响的内容尺寸计算文本、内联内容区域的排版计算2.4.4 滚动尺寸scrollWidth/scrollHeight、scrollTop/scrollLeftscroll 系列属性描述元素的滚动内容与滚动状态包含溢出隐藏的内容尺寸且 scrollTop / scrollLeft 支持读写是滚动交互的核心操作属性。一、尺寸属性scrollWidth /scrollHeight表示元素的全部内容尺寸包含滚动隐藏的溢出部分计算公式完整内容宽度 左右内边距包含溢出可视区域的内容当内容没有溢出时scrollWidth 等于 clientWidth内容溢出时scrollWidth 大于 clientWidth不包含边框、外边距// 获取元素所有内容的总高度 const totalContentHeight element.scrollHeight;二、位置属性scrollTop /scrollLeft表示元素滚动条的滚动距离即当前可视区域顶部 / 左侧距离完整内容顶部 / 左侧的像素数。scrollTop垂直滚动距离内容向上滚动的像素数scrollLeft水平滚动距离内容向左滚动的像素数这两个属性是可读写的赋值可以直接控制元素的滚动位置。三、核心特点包含溢出内容scroll 尺寸是完整内容的大小不限于可视区域。可读写控制scrollTop / scrollLeft 支持赋值可实现滚动定位、回到顶部等功能。整数取值返回整数像素值滚动位置均按整像素计算。四、典型应用// 判断滚动到底部1px容差兼容浏览器取整差异 function isScrollToBottom(element) { return element.scrollTop element.clientHeight element.scrollHeight - 1; } // 滚动到顶部 function scrollToTop(element) { element.scrollTop 0; }四组尺寸 API 对比总结对比维度offset系列client系列scroll系列getBoundingClientRect尺寸范围内容 内边距 边框内容 内边距不含边框、滚动条完整内容 内边距含溢出内容 内边距 边框参考坐标系offsetParent 祖先元素元素自身元素自身内容浏览器视口读写性只读只读scrollTop/scrollLeft 可读写其余只读只读受页面滚动影响否否尺寸不受影响滚动位置值变化是典型用途相对父级定位、完整布局尺寸内部可用空间计算滚动交互、内容总尺寸视口检测、绝对位置计算