JavaScript scrollHeight

红太狼 2020-05-27 13:19 713阅读 0赞

# JavaScript scrollHeight

scrollHeight 属性返回指定元素的内容高度，只读属性，返回值是一个数字（不带任何单位，默认以像素计）。

此属性对内容高度进行四舍五入取整。

掌握此属性关键在于理解什么是 "内容高度"，后续通过代码详细分析。

语法结构：

```javascript
let num = dom.scrollHeight;
```

内容高度图示如下：

![](/images/1590585521496.jpg)

图示简单分析如下：

（1）.元素的高度并不能完全表达其"内容高度"。

（2）.因为，内容的高度可能会更大，如上图蓝色内容，高度大于其容器。

上面进行了粗略的概述，以便对内容高度有一个总体把握，下面通过代码实例演示细节。

**浏览器支持：**

（1）.IE 浏览器支持此属性。

（2）.edge 浏览器支持此属性。

（3）.谷歌浏览器支持此属性。

（4）.火狐浏览器支持此属性。

（5）.opera 浏览器支持此属性。

（6）.safari 浏览器支持此属性。

**代码实例：**

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style>
#ant {
  width :100px;
  height :40px;
  line-height :40px;
  margin :5px;
  padding :10px;
  border :2px dotted #ccc;
  text-align :center;
  font-size: 12px;
  color:green;
}
</style>
<script>
window.onload = ()=> {
  let oDiv=document.getElementById("ant");
  let num = oDiv.scrollHeight;
  oDiv.innerHTML = num;
}
</script>
</head>
<body>
  <div id="ant"></div>
</body>
</html>
```

代码运行效果截图如下：

![](/images/1590585500896.jpg)

对上述代码分析如下：

（1）.垂直方位没有出现滚动条，那么 scrollHeight 与 clientHeight 相同。

（2）.60 = 40（height）+ 10（padding-top）+ 10（padding-bottom）。

（3）.也就是 ，scrollHeight 属性值等于元素 height 高度加上下内边距。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style>
div{
  border:2px dotted #ccc;
  text-align:center;
}
#ant {
  width:120px;
  height:60px;
  margin:5px;
  padding:10px;
  overflow:auto;
}
#inner{
  width:50px;
  height:200px;
  margin:5px;
}
#show{
  width: 145px;
  color:green;
  font-size: 12px;
}
</style>
<script>
window.onload = ()=> {
  let oDiv=document.getElementById("ant");
  let oshow=document.getElementById("show");
  let num = oDiv.scrollHeight;
  oshow.innerHTML = num;
}
</script>
</head>
<body>
  <div id="ant">
    <div id="inner"></div>
  </div>
  <div id="show"></div>
</body>
</html>
```

上述代码运行效果截图如下：

![](/images/1590585476210.jpg)

下面进行一下分析：

（1）."内容高度" 较大，所以父元素出现垂直滚动条。

（2）."内容高度" 等于元素在不出现垂直滚动条情况下，恰好容纳其内部所有内容所需要的视口高度。

（3）.所以上述 "视口高度" = ant.padding（10+10）+ inner.height（200）+ inner.borderWidth（2+2）+ inner.margin（5+5）= 234。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style>
div {
  border :2px dotted #ccc;
  text-align :center;
}
#ant {
  width :125px;
  height :214px;
  padding :10px;
  margin-bottom :5px;
  overflow :auto;
}
#inner {
  width :50px;
  height :200px;
  margin :5px;
}
#show {
  width :145px;
  color :green;
  font-size :12px;
}
</style>
<script>
window.onload = ()=> {
  let oDiv = document.getElementById("ant");
  let oshow = document.getElementById("show");
  let num = oDiv.scrollHeight;
  oshow.innerHTML = num;
}
</script>
</head>
<body>
  <div id="ant">
    <div id="inner"></div>
  </div>
  <div id="show"></div>
</body>
</html>
```

代码运行效果截图如下：

![](/images/1590585443768.jpg)

代码说明如下：

（1）.此代码仅调整了 ant 元素的高度。

（2）.高度调整到214px，这是不出现滚动条的临界值。

（3）.ant 元素的视口高度（clientHeight）就是 scrollHeight 高度值，以此证明 "内容高度等于元素在不出现垂直滚动条情况下，恰好容纳其内部所有内容所需要的视口高度" 结论的正确性。