clientHeight与scrollHeight 区别

卡布奇诺www

于 2024-02-20 15:20:36 发布

阅读量638

点赞数 6

文章标签：前端 javascript 数据结构

本文链接：https://blog.csdn.net/notbaldness/article/details/136190922

版权

`clientHeight` 和 `scrollHeight` 是用于获取元素的高度的属性，但它们有一些区别：

clientHeight 用于获取元素的可见区域的高度，即不包括溢出部分。它包含元素的内部高度和内边距，但不包括边框和外边距。

scrollHeight 用于获取元素内容的总高度，包括溢出部分。它包含元素的内部高度、内边距和溢出内容的高度，但不包括边框和外边距。

换句话说，clientHeight 表示了元素的可见区域的大小，而 scrollHeight 表示了元素内容的实际高度，即使内容溢出也会被计算在内。

另外，clientHeight 和 scrollHeight 的值都是以像素为单位的整数。需要注意的是，这些属性只适用于块级元素和内联块元素，对于非可滚动的行内元素，它们的值可能不准确或无效，并且在获取之前要确保元素已经渲染。

废话不多说，直接上代码示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scrollHeight equals clientHeight Example</title>
<style>
  .container {
    width: 200px;
    height: 100px;
    border: 1px solid #ccc;
    overflow: auto;
  }
</style>
</head>
<body>
<div class="container">
  <p>这是一个没有内容溢出的示例文本。</p>
  <p>这是一个没有内容溢出的示例文本。</p>
  <p>这是一个没有内容溢出的示例文本。</p>
  <p>这是一个没有内容溢出的示例文本。</p>
</div>

<script>
  const container = document.querySelector('.container');
  
  console.log('scrollHeight:', container.scrollHeight);
  console.log('clientHeight:', container.clientHeight);
</script>
</body>
</html>

比如上面代码scrollHeight获取的是可滚动范围的高度，而clientHeight高度就为可视高度100
将上面代码的height: 100px;注释或删除掉，再次打印，此时打印的scrollHeight和clientHeight就是相等的了