clientHeight 是元素可视区域高度（含 padding，不含 border、margin 和滚动条），scrollHeight 是元素全部内容总高度（含被滚动隐藏部分）；二者常与 scrollTop 配合判断滚动位置。
clientHeight 和 scrollHeight 是 JavaScript 中常用于获取元素尺寸的两个只读属性，它们的含义和适用场景不同，容易混淆。关键区别在于：是否包含不可见（被滚动隐藏）的内容、是否计入边框与滚动条。
clientHeight：可视区域高度（含内边距，不含滚动条、边框、外边距）
clientHeight 表示元素内容区 + 内边距（padding）在当前视口中的可见高度，不包括滚动条占用的空间、边框（border）、外边距（margin），也不包含被滚动隐藏的部分。
- 如果元素没有溢出、无需滚动，clientHeight ≈ offsetHeight − border × 2（因为 offsetHeight 包含 border）
- 如果元素有垂直滚动条（如 overflow: auto），clientHeight 会自动减去滚动条宽度（在 Windows 常见为 17px），即“可视内容区净高”
- 对于 body 或 document.documentElement，浏览器兼容性需注意：建议优先用 document.documentElement.clientHeight 获取视口高度
scrollHeight：整个内容的实际总高度（含不可见部分）
scrollHeight 是元素内部所有内容（包括溢出并被隐藏的部分）在垂直方向上占据的总高度，它至少等于 clientHeight，但当内容超出容器时会更大。
- scrollHeight = 可见内容高度 + 隐藏内容高度（即滚动可到达的全部内容高度）
- 它包含 padding，但不包含 border、margin、滚动条本身；不过，若子元素有 margin-bottom，可能间接影响 scrollHeight 计算（因 margin 参与块级布局高度累积）
- 常用于判断是否已滚动到底：
element.scrollTop + element.clientHeight >= element.scrollHeight
常见组合对比与使用建议
理解它们的关系，往往还需结合 scrollTop（已滚动的顶部距离）：
立即学习“Java免费学习笔记（深入）”；
-
scrollHeight - clientHeight≈ 可滚动的剩余高度（即还能向下滚多少像素） -
scrollTop为 0 表示在顶部；接近scrollHeight - clientHeight表示到底部 - 检测是否触底示例：
const box = document.getElementById('scroll-box'); box.addEventListener('scroll', () => { if (box.scrollTop + box.clientHeight >= box.scrollHeight - 1) { console.log('已到底部'); } });
注意边界情况
某些场景下值可能不符合直觉：
- 空元素或仅含空白字符时，scrollHeight 可能为 0 或一个最小行高（如 16px），取决于 font-size 和 line-height
- 设置了
overflow: hidden且内容溢出时，scrollHeight 仍反映完整内容高度，但 clientHeight 不变，此时无法滚动 - 在 iframe 或跨域 context 中，访问其 contentDocument 的高度属性可能受限制
- CSS transform、scale 等不影响 clientHeight / scrollHeight 的计算（它们基于布局尺寸，非渲染后尺寸）
