clientHeight，scrollHeight，offsetHeight
-
clientHeight: it can be understood as the height of the internal visual area, the height of the style + up and down padding
-
scrollHeight: the actual height of content + up and down padding (if there is no limit to the height of div, that is, the height is adaptive, generally scrollHeight==clientHeight)
-
offsetHeight: it can be understood as the visual height of div. the height of style + padding + border width.
clientTop，scrollTop，offsetTop
-
clientTop: the top offset inside the container relative to the container itself is actually the top border width (div1 is 10px, div2 is 20px)
-
Scrolltop: the scroll bar of y-axis does not exist, or is 0 when scrolling to the top; the scroll bar of y-axis is scrollheight clientheight when scrolling to the bottom
-
Offsettop: the distance from the container to the top of its containing block. Roughly speaking, it can be understood as its parent element. offsetTop = top + margin-top + border-top
When scrolling, we usually only have scrollTop. When scrollTop is 0 to scrollheight clientheight, it is the normal scrolling distance. Otherwise, it is over scrolling (pull-up and pull-down on the phone)!
Code:
<!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>