Offset、Scroll、Client 属性对比
理解 DOM 元素的三组尺寸和位置属性
问题
offset、scroll、client 这三组属性有什么区别？分别用于什么场景？
解答
三组属性概览
| 属性组 | 宽高含义 | 位置含义 |
|---|---|---|
| offset | 元素完整尺寸（含边框） | 相对定位父元素的偏移 |
| client | 可视区域尺寸（不含边框和滚动条） | 边框宽度 |
| scroll | 内容完整尺寸（含溢出部分） | 滚动距离 |
Offset 系列
const box = document.querySelector('.box');
// offsetWidth = content + padding + h38kz + 滚动条宽度
// offsetHeight = content + padding + h38kz + 滚动条高度
console.log(box.offsetWidth, box.offsetHeight);
// offsetLeft/offsetTop：相对于 offsetParent 的偏移
console.log(box.offsetLeft, box.offsetTop);
// offsetParent：最近的定位祖先（position 非 static）
console.log(box.offsetParent);Client 系列
const box = document.querySelector('.box');
// clientWidth = content + padding（不含边框和滚动条）
// clientHeight = content + padding（不含边框和滚动条）
console.log(box.clientWidth, box.clientHeight);
// clientLeft/clientTop：左边框和上边框的宽度
console.log(box.clientLeft, box.clientTop);Scroll 系列
const box = document.querySelector('.box');
// scrollWidth/scrollHeight：内容的完整尺寸（包括溢出不可见部分）
console.log(box.scrollWidth, box.scrollHeight);
// scrollLeft/scrollTop：已滚动的距离（可读写）
console.log(box.scrollLeft, box.scrollTop);
// 滚动到指定位置
box.scrollTop = 100;可视化示例
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
padding: 20px;
}
.box {
width: 200px;
height: 150px;
padding: 20px;
border: 10px solid #333;
margin: 30px;
overflow: auto;
}
.content {
width: 300px;
height: 400px;
background: linear-gradient(#f0f0f0, #ccc);
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="content">滚动内容</div>
</div>
</div>
<script>
const box = document.querySelector('.box');
// Offset：元素完整尺寸
// 200 + 20*2 + 10*2 = 260
console.log('offsetWidth:', box.offsetWidth); // 260
console.log('offsetHeight:', box.offsetHeight); // 210
console.log('offsetLeft:', box.offsetLeft); // 30（margin）
// Client：可视区域（不含边框和滚动条）
// 200 + 20*2 = 240（减去滚动条约17px）
console.log('clientWidth:', box.clientWidth); // ~223
console.log('clientHeight:', box.clientHeight); // 190
console.log('clientLeft:', box.clientLeft); // 10（边框宽度）
// Scroll：内容完整尺寸
console.log('scrollWidth:', box.scrollWidth); // 300（内容宽度）
console.log('scrollHeight:', box.scrollHeight); // 440（内容高度+padding）
// 监听滚动
box.addEventListener('scroll', () => {
console.log('scrollTop:', box.scrollTop);
});
</script>
</body>
</html>常见应用场景
// 1. 判断元素是否滚动到底部
function isScrolledToBottom(el) {
return el.scrollHeight - el.scrollTop === el.clientHeight;
}
// 2. 获取元素在页面中的绝对位置
function getAbsolutePosition(el) {
let left = 0, top = 0;
while (el) {
left += el.offsetLeft;
top += el.offsetTop;
el = el.offsetParent;
}
return { left, top };
}
// 3. 判断是否有滚动条
function hasScrollbar(el) {
return el.scrollHeight > el.clientHeight;
}
// 4. 获取滚动条宽度
function getScrollbarWidth(el) {
return el.offsetWidth - el.clientWidth - el.clientLeft * 2;
}关键点
- offsetWidth/Height：元素占据的完整空间，包含 content + padding + border
- clientWidth/Height：元素内部可视区域，包含 content + padding，不含边框和滚动条
- scrollWidth/Height：元素内容的完整尺寸，包括溢出隐藏的部分
- scrollTop/Left 是可读写的，其他属性都是只读
- 判断滚动到底：
scrollHeight - scrollTop === clientHeight
目录