对scrollHeight的一点了解

前言：

scrollHeight 是一个 DOM 元素的属性，它表示元素内容的总高度。可以用于获取或设置元素的滚动高度。当元素内容超出可见区域时，可以使用 scrollHeight 属性来确定滚动条的高度或进行滚动操作。

我写了一个示例代码来看看scrollHeight的具体计算方法

HTML代码：

<div id="divv" style="height: 200px;width: 200px;background-color: red;overflow: auto;">
   <ul>
     <li v-for="item in 20" :key="item" style="height: 20px;">Li {{ item }}</li>
   </ul>
</div>

JS代码：

const divv = document.getElementById('divv');
console.log('divv的scrollHeight', divv?.scrollHeight);// 输出414
console.log('divv的clientHeight', divv?.clientHeight);// 输出200
console.log('divv的offsetHeight', divv?.offsetHeight);// 输出200

审查元素发现，ul元素有14px的外边距

给divv元素增加一行属性：

box-sizing: border-box;

控制台输出结果如下：

console.log('divv的scrollHeight', divv?.scrollHeight);// 输出400
console.log('divv的clientHeight', divv?.clientHeight);// 输出200
console.log('divv的offsetHeight', divv?.offsetHeight);// 输出200

总结：

由上面的示例看出，scrollHeight的计算取决于盒子模型的计算方式。

顺便了解一下box-sizing：

box-sizing是一个 CSS 属性，用于控制元素的盒模型计算方式。它可以影响元素的宽度和高度的计算方式，以及边框和内边距对元素尺寸的影响。

有两个可选值：

content-box（默认值）：元素的宽度和高度仅包括内容区域，不包括边框和内边距。换句话说，元素的宽度和高度不会受到边框和内边距的影响。

border-box：元素的宽度和高度包括内容区域、边框和内边距。换句话说，元素的宽度和高度会将边框和内边距计算在内。