clientHeight,scrollHeight,offsetHeight
-
clientHeight: 可理解为内部可视区高度,样式的height+上下padding
-
scrollHeight: 内容的实际高度+上下padding(如果没有限制div的height,即height是自适应的,一般是scrollHeight==clientHeight)
-
offsetHeight:可理解为div的可视高度,样式的height+上下padding+上下border-width。
clientTop,scrollTop,offsetTop
-
clientTop: 容器内部相对于容器本身的top偏移,实际就是 上border-width (div1是10px,div2是20px)
-
scrollTop: Y轴的滚动条没有,或滚到最上时,是0;y轴的滚动条滚到最下时是 scrollHeight-clientHeight(很好理解)
-
offsetTop: 容器到其包含块顶部的距离,粗略的说法可以理解为其父元素。 offsetTop = top + margin-top + border-top
滚动时通常我们只能scrollTop,当scrollTop为 0 到 scrollHeight-clientHeight 是正常的滚动距离,否则就是滚动过头了(手机上的上下拉取)!
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
margin: 20px;
border: 10px solid gray;
padding: 10px;
}
#wrapper {
position: relative;
}
#div1,
#div2 {
height: 200px;
width: 200px;
}
#tip1,
#tip2 {
position: absolute;
margin: 0;
right: 100px;
height: 150px;
}
#tip1 {
top: 50px;
}
#tip2 {
top: 300px;
}
#div1 {
overflow: scroll;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="div1">
<p style="height:300px;border: 2px solid red"></p>
<div id="tip1">
<p>div1</p>
<p>clientHeight:<span id="clientHeight1"></span></p>
<p>scrollHeight:<span id="scrollHeight1"></span></p>
<p>offsetHeight:<span id="offsetHeight1"></span></p>
<p>clientTop:<span id="clientTop1"></span></p>
<p>scrollTop:<span id="scrollTop1"></span></p>
<p>offsetTop:<span id="offsetTop1"></span></p>
</div>
</div>
<div id="div2" style="border:20px solid">
<div id="tip2">
<p>div2</p>
<p>clientHeight:<span id="clientHeight2"></span></p>
<p>scrollHeight:<span id="scrollHeight2"></span></p>
<p>offsetHeight:<span id="offsetHeight2"></span></p>
<p>clientTop:<span id="clientTop2"></span></p>
<p>scrollTop:<span id="scrollTop2"></span></p>
<p>offsetTop:<span id="offsetTop2"></span></p>
</div>
</div>
</div>
</body>
<script>
clientHeight1.innerHTML = div1.clientHeight
scrollHeight1.innerHTML = div1.scrollHeight
offsetHeight1.innerHTML = div1.offsetHeight
clientTop1.innerHTML = div1.clientTop
scrollTop1.innerHTML = div1.scrollTop
offsetTop1.innerHTML = div1.offsetTop
clientHeight2.innerHTML = div2.clientHeight
scrollHeight2.innerHTML = div2.scrollHeight
offsetHeight2.innerHTML = div2.offsetHeight
clientTop2.innerHTML = div2.clientTop
scrollTop2.innerHTML = div2.scrollTop
offsetTop2.innerHTML = div2.offsetTop
</script>
</html>