哈尔滨双城区建设局网站网页设计html代码大全
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.clientHeightscrollHeight1.innerHTML = div1.scrollHeightoffsetHeight1.innerHTML = div1.offsetHeightclientTop1.innerHTML = div1.clientTopscrollTop1.innerHTML = div1.scrollTopoffsetTop1.innerHTML = div1.offsetTopclientHeight2.innerHTML = div2.clientHeightscrollHeight2.innerHTML = div2.scrollHeightoffsetHeight2.innerHTML = div2.offsetHeightclientTop2.innerHTML = div2.clientTopscrollTop2.innerHTML = div2.scrollTopoffsetTop2.innerHTML = div2.offsetTop</script></html>