EnlightenCode

client、offset、scroll区分 🌟 ​

前言 ​

在前端开发中，我们经常需要获取元素的宽高、相对视口的宽高等位置属性。然而，client、offset、scroll等属性常常让人感到困惑。本文将通过详细的解释和示例帮助你理解这些属性。

宽高相关 📏 ​

  1. client：表示可视区域的宽高

    • clientWidth:
      1. 通常指元素的contentWidth + padding。
      2. 对于display: inline的元素（如span），该值为0。
      3. 在怪异盒模型下，等于width - border。
    • clientHeight:
      1. 通常指元素的contentHeight + padding。
      2. 对于display: inline的元素，该值为0。
      3. 在怪异盒模型下，等于height - border。

  2. offset：表示元素的实际占用空间

    • offsetWidth:
      1. 通常指元素的contentWidth + padding + border。
      2. 对于display: inline的元素，该值为实际内容宽度 + padding + border。
      3. 在怪异盒模型下，等于元素的width。
    • offsetHeight:
      1. 通常指元素的contentHeight + padding + border。
      2. 对于display: inline的元素，该值为实际内容高度 + 浏览器默认样式高度 + padding + border。
      3. 在怪异盒模型下，等于元素的height。

  3. scroll：表示元素的滚动区域

client、offset、scroll 的区别与实践 ​

前言 ​

在前端开发中，我们常常需要读取元素的尺寸与位置（用于布局、动画、tooltip 定位等场景）。client、offset、scroll 和 getBoundingClientRect() 都与尺寸有关，但各自用途与含义不同。本文把概念梳理清楚并给出实战建议。

概念总览 ​

浏览器对元素尺寸有 4 个维度：

  • offset：布局占位（layout）
  • client：可视内容区域
  • scroll：内容真实尺寸（含溢出）
  • rect（getBoundingClientRect）：视口坐标系中的真实像素尺寸

一句话记忆：

offset = 布局，client = 可视内容，scroll = 内容本体，rect = 屏幕像素

offset 系列（布局级） ​

  • offsetWidth / offsetHeight

    • 含义：content + padding + border
    • 不含：margin、outline、transform 缩放
    • 特点：值为整数（会取整），反映元素在文档流中的占位尺寸

  • offsetLeft / offsetTop

    • 含义：元素相对于 offsetParent 的位置（最近的非 static 定位祖先；否则为 body/html）

应用场景：布局测量、动画初始位移、拖拽定位、绝对定位坐标计算

client 系列（可视内容区域） ​

  • clientWidth / clientHeight

    • 含义：content + padding
    • 不含：border、margin、滚动条
    • 注意：对于 display: inline 的元素（如 span），clientWidth/Height 可能为 0

  • clientLeft / clientTop：分别通常等于左/上边框宽度

用途：文本适配、排版空间计算、判断滚动条遮挡

scroll 系列（内容真实尺寸） ​

  • scrollWidth / scrollHeight

    • 含义：内容的真实尺寸（包含溢出与 padding），不包含 border/margin

  • scrollLeft / scrollTop：可读写，表示滚动偏移

用途：判断内容是否溢出（scrollWidth > clientWidth）、滚动动画、无限滚动

getBoundingClientRect() ​

返回元素在视口（viewport）中的像素级坐标，支持小数并受 transform / 缩放影响，常用字段：left, top, right, bottom, width, height。

适用场景：像素级定位（tooltip、canvas 对齐）、受 transform 的布局与动画

代码示例 ​

下面示例对比三种盒模型与属性读取：

html
<style>
  .box1 {
    width: 200px;
    height: 300px;
    border: 2px solid red;
    padding: 20px;
    margin: 100px;
  }
  .box2 {
    box-sizing: border-box;
    width: 200px;
    height: 300px;
    border: 2px solid red;
    padding: 20px;
    margin: 100px;
  }
  .box3 {
    border: 2px solid red;
    padding: 20px;
    margin: 100px;
  }
</style>

<div class="box1"></div>
<div class="box2"></div>
<span class="box3"></span>

<script>
  const box1 = document.querySelector('.box1');
  const box2 = document.querySelector('.box2');
  const box3 = document.querySelector('.box3');

  console.log('box1.offsetWidth', box1.offsetWidth); // 244
  console.log('box1.clientWidth', box1.clientWidth); // 240
  console.log('box1.getBoundingClientRect()', box1.getBoundingClientRect()); // {left: 100, top: 100, width: 243.6, height: 343.6, right: 343.6, bottom: 443.6, x: 100, y: 100}

  console.log('box2.offsetWidth', box2.offsetWidth); // 200
  console.log('box2.clientWidth', box2.clientWidth); // 196

  console.log('box3.offsetWidth', box3.offsetWidth); // 44
  console.log('box3.clientWidth', box3.clientWidth); // 0
</script>

（在不同浏览器/盒模型下输出可能略有差异；示例用于对比含义）

常见坑与实战建议 ​

  • display:none 时元素不参与布局，所有尺寸为 0。
  • transform 不会改变 offsetWidth，但会影响 getBoundingClientRect()。
  • offsetWidth 为整数（无小数），而 rect.width 可以有小数。
  • 读取布局相关属性会触发回流（reflow）——在同一帧内批量读取，然后批量写入，避免强制回流导致掉帧。
  • RTL（从右到左）会影响 offsetLeft 的含义与表现。

动画建议：

  • 需要反映“布局占位”的动画（影响文档流），可使用 offsetWidth 等来计算；
  • 精确视觉定位（受 transform/缩放 的情况），优先使用 getBoundingClientRect()；
  • 判断溢出：scrollWidth > clientWidth。

对比速查表 ​

属性包含 content包含 padding包含 border小数受 transform作用
offsetWidth✔✔✔✖✖布局占位
clientWidth✔✔✖✖✖可视内容
scrollWidth✔✔✖✖✖内容真实尺寸（含溢出）
rect.width (getBoundingClientRect)✔✔✔✔✔屏幕像素/视觉定位

总结 ​

理解这四类尺寸的差别，可以让你在布局、动画和定位时选择正确的测量方法，从而避免常见的错位与抖动问题：

  • 想要“占位”上的尺寸，用 offset；
  • 想要“内容”可见区域，用 client；
  • 想知道内容是否溢出或真实高度，用 scroll；
  • 想要像素级、受 transform 影响的视觉位置，用 getBoundingClientRect()（rect）。

掌握这些后，常见尺寸问题会变得容易排查。欢迎把你遇到的具体场景发给我，我可以帮你具体分析并给出修复建议。 clientHeight = content + padding