您的位置:首页> 前端教程> JS教程
文章导航

JavaScript scrollHeight

2019-1-3 13:42| 作者: admin| 查看: 3111| 评论: 0|来自: 蚂蚁部落

通常,DOM操作非常简单,最让人困扰的因素之一可能是名目繁多的DOM属性。

不过,只要明白属性的实质,就会让人感觉原来是如此简单,下面来解析scrollHeight属性。

此属性返回元素的内容高度,返回值是一个整数,默认单位是像素,只读属性。

特别说明:此属性对内容高度进行四舍五入取整,如需精确值,推荐getBoundingClientRect方法。

搞清楚“内容高度”的实质,是理解此属性的关键。

height属性可以返回元素的高度,但是有时此高度不能真实表达元素实质容纳内容的高度。

因为元素的内容高度可能超过元素的高度,此时,有一部分内容处于不可见状态。

看如下图示:

a:3:{s:3:\"pic\";s:43:\"portal/201901/03/134235a8sc9n869aasjjps.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

那么这内容高度就很容易理解了,它包括由于出现滚动条而导致溢出不可见的部分。

千言万语总结一句话,"内容高度"等于元素在不出现垂直滚动条情况下,恰好容纳其内部所有内容所需要的高度。

语法结构:

[JavaScript] 纯文本查看 复制代码
dom.scrollHeight

浏览器支持:

(1).IE浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).火狐浏览器支持此属性。

(5).opera浏览器支持此属性。

(6).safria浏览器支持此属性。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#ant {
  width:100px;
  height:60px;
  text-align:center;
  line-height:60px;
  background:#ccc;
  margin:5px;
  padding:10px;
  border:5px solid blue;
}
</style>
<script>
window.onload = function () {
  let odiv=document.getElementById("ant");
  let num = odiv.scrollHeight;
  odiv.innerHTML = num;
}
</script>
</head>
<body>
<div id="ant"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/03/134332zg5avpcgm3dacgbp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

垂直方位没有出现滚动条,那么scrollHeight值与clientHeight值相同。

80 = 60(height)+ 10(padding-top)+ 10(padding-bottom)。

scrollHeight值等于元素height高度加上下内边距。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#ant {
  width:120px;
  height:60px;
  text-align:center;
  line-height:60px;
  background:#ccc;
  margin:5px;
  padding:10px;
  border:5px solid blue;
  overflow:auto;
}
#inner{
  width:100px;
  height:200px;
  margin:5px;
  background-color:green;
}
</style>
<script>
window.onload = function () {
  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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/03/134400cy22shfn5smnu1yc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

父元素出现垂直滚动条,这说明其所容纳的内容高度超出一定限度。

这个限度就是scrollHeight的返回,也就是所谓的"内容高度"。

文章前半部分已经总结过,"内容高度"等于元素在不出现垂直滚动条情况下,恰好容纳其内部所有内容所需要的视口高度。代码修改如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#ant {
  width:120px;
  height:210px;
  text-align:center;
  line-height:60px;
  background:#ccc;
  margin:5px;
  padding:10px;
  border:5px solid blue;
  overflow:auto;
}
#inner{
  width:100px;
  height:200px;
  margin:5px;
  background-color:green;
}
</style>
<script>
window.onload = function () {
  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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/03/134432frydhn66dgr31c5a.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码,将父元素的height设置为210px,此时在垂直方位恰好没有滚动条。

临界点时,父元素客户区高度就是scollHeight高度,值是父元素的height与上下内边距的和。

这个高度也就是父元素的"内容高度",不过这个内容高度是其内容实质占据的高度与父元素的上下内边距的和。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部