offsetheight
clientheight，scrollheight，offsetheight
-
clientHeight: 可理解为内部可视区高度，样式的height+上下padding
-
scrollHeight: 内容的实际高度+上下padding（如果没有限制p的height，即height是自适应的，一般是scrollHeight==clientHeight）
-
offsetHeight:可理解为p的可视高度，样式的height+上下padding+上下border-width。
clientTop，scrollTop，offsettop
-
clientTop: 容器内部相对于容器本身的top偏移，实际就是 上border-width （p1是10px，p2是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;
}
p {
margin: 20px;
border: 10px solid gray;
padding: 10px;
}
#wrAPPer {
position: relative;
}
#p1,
#p2 {
height: 200px;
width: 200px;
}
#tip1,
#tip2 {
position: absolute;
margin: 0;
right: 100px;
height: 150px;
}
#tip1 {
top: 50px;
}
#tip2 {
top: 300px;
}
#p1 {
overflow: scroll;
}
</style>
</head>
<body>
<p id="wrapper">
<p id="p1">
<p style="height:300px;border: 2px solid red"></p>
<p id="tip1">
<p>p1</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>
</p>
</p>
<p id="p2" style="border:20px solid">
<p id="tip2">
<p>p2</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>
</p>
</p>
</p>
</body>
<script>
clientHeight1.innerHTML = p1.clientHeight
scrollHeight1.innerHTML = p1.scrollHeight
offsetHeight1.innerHTML = p1.offsetHeight
clientTop1.innerHTML = p1.clientTop
scrollTop1.innerHTML = p1.scrollTop
offsetTop1.innerHTML = p1.offsetTop
clientHeight2.innerHTML = p2.clientHeight
scrollHeight2.innerHTML = p2.scrollHeight
offsetHeight2.innerHTML = p2.offsetHeight
clientTop2.innerHTML = p2.clientTop
scrollTop2.innerHTML = p2.scrollTop
offsetTop2.innerHTML = p2.offsetTop
</script>
</html>
相关阅读
前言: 如果需要动态计算标签的距离时，我们时常会用到这两个属性offsetLeft和offsetTop，我的使用场景是，我有一个背景的p1，另一个p2并
关于scrollHeight和scrollTop取值为0的问题
js:关于scrollHeight和scrollTop取值为0的问题 obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。 obj.offsetLeft
定位参照点 offsetTop 的定位是相对于 offsetParent 元素的 offsetParent的定义：与当前元素最近的经过定位(position不等于static
offsetTop,offsetHeight,clientHeight图解
动态的计算弹框距离外部元素的位置，即获取元素的offsetLeft、offsetTop、offsetWidth、offsetHeight，如果弹框的宽度（offsetWidth）+距
【带图】讲解offsetHeight、offsetLeft、clientWidth
1.偏移量元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框的大小（注意，不包括外边距）。offsetHeight：元素在垂直方向上