clientHeight offsetHeight scrollTop scrollHeight
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:200px;
height:200px;
background-color: darkgrey;
margin:100px auto;
overflow: scroll;
border:10px solid coral;
padding:5px;
}
.box2{
width:100px;
height:400px;
background-color: darkmagenta;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<script>
box1=document.querySelector('.box1')
box2=document.querySelector('.box2')
</script>
</body>
</html>
当overflow设为scroll时, box1 的clientHeight并不会因为padding发生改变,这与 overflow没设置时不同,没设置时 clientHeight包括了padding (210)
当overflow scroll时, box1的 clientHeight 就是其 height - 7px
总高度 400+5+5
故box1.scrollTop = 410 - 193 = 217
box1.scrollHeight 不会因为 滚动而发生变化 就是 400 + 5 + 5
box2.scrollHeight === 400 不包括 box1 的padding
给box2添加margin
box1.scrollHeight 增加了 10
拉到底部的时候 box1.scrollTop 增加了 10
标签：clientHeight,padding,offsetHeight,scrollTop,overflow,box1,scrollHeight,box2 来源： https://www.cnblogs.com/dissipate/p/14738100.html