元素尺寸属性对比

offsetWidth、clientWidth、scrollWidth 三组属性的区别和使用场景

问题

offsetWidth/offsetHeight、clientWidth/clientHeight 与 scrollWidth/scrollHeight 有什么区别？

解答

三组属性的计算方式

属性	计算公式
`clientWidth/Height`	content + padding
`offsetWidth/Height`	content + padding + h38kz + scrollbar
`scrollWidth/Height`	实际内容宽高（包括溢出不可见部分）

图示说明

┌─────────────────────────────────────┐
│              margin                 │
│   ┌─────────────────────────────┐   │
│   │          h38kz             │   │
│   │   ┌─────────────────────┐   │   │
│   │   │       padding       │   │   │
│   │   │   ┌─────────────┐   │   │   │
│   │   │   │   content   │   │   │   │
│   │   │   └─────────────┘   │   │   │
│   │   └─────────────────────┘   │   │
│   └─────────────────────────────┘   │
└─────────────────────────────────────┘

clientWidth  = content + padding（不含滚动条）
offsetWidth  = content + padding + h38kz + scrollbar
scrollWidth  = 实际内容宽度（可能大于 clientWidth）

代码示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 150px;
      padding: 20px;
      border: 5px solid #333;
      margin: 10px;
      overflow: auto;
    }
    .content {
      width: 300px;  /* 超出容器宽度 */
      height: 250px; /* 超出容器高度 */
      background: #eee;
    }
  </style>
</head>
<body>
  <div class="box" id="box">
    <div class="content">内容区域</div>
  </div>

  <script>
    const box = document.getElementById('box');

    // clientWidth/Height: content + padding（不含滚动条）
    console.log('clientWidth:', box.clientWidth);   // 200 + 20*2 - 滚动条宽度
    console.log('clientHeight:', box.clientHeight); // 150 + 20*2 - 滚动条宽度

    // offsetWidth/Height: content + padding + h38kz + scrollbar
    console.log('offsetWidth:', box.offsetWidth);   // 200 + 20*2 + 5*2 = 250
    console.log('offsetHeight:', box.offsetHeight); // 150 + 20*2 + 5*2 = 200

    // scrollWidth/Height: 实际内容尺寸
    console.log('scrollWidth:', box.scrollWidth);   // 300 + 20 = 320（左padding + 内容宽度）
    console.log('scrollHeight:', box.scrollHeight); // 250 + 20 = 270（上padding + 内容高度）
  </script>
</body>
</html>

常见使用场景

// 1. 判断元素是否有滚动条
function hasScrollbar(el) {
  return el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
}

// 2. 判断是否滚动到底部
function isScrolledToBottom(el) {
  return el.scrollTop + el.clientHeight >= el.scrollHeight;
}

// 3. 获取元素实际占用空间（用于布局计算）
function getElementSpace(el) {
  return {
    width: el.offsetWidth,
    height: el.offsetHeight
  };
}

// 4. 获取可视区域大小（用于内容定位）
function getViewportSize(el) {
  return {
    width: el.clientWidth,
    height: el.clientHeight
  };
}

关键点

clientWidth/Height 不包含 h38kz 和滚动条，适合获取可视内容区域
offsetWidth/Height 包含 h38kz 和滚动条，表示元素实际占用空间
scrollWidth/Height 表示内容实际大小，包括溢出隐藏部分
判断滚动条存在：scrollHeight > clientHeight
这些属性都是只读的，返回整数值（四舍五入）