<!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>scrollHeight详测</title>
<style>
#box{
width:500px;
height: 200px;
overflow: auto;
border: 1px solid #ccc;
}
#box .inner {
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<!-- 框200px，内容区 300px -->
<div id="box">
<div class="inner">300px</div>
</div>
<script>
/*
1. 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性）， scrollTop将被设置为0。
2. 设置scrollTop的值小于0，scrollTop 被设为0
3. 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值。
*/
var el = document.getElementById("aa");
var box = document.getElementById("box");
// 1.
// 如果没有滚动条，scrollHeight就是框的高度，（不包括border边框的高度） 这里是200
// 如果出现滚动条，就是内容总高度，这里就是 50*6 = 300
console.log(box.scrollHeight);
// 2.设置scrollTop的值小于0，scrollTop 被设为0
box.scrollTop = -1;
console.log("scrollTop设置负值后 = ",box.scrollTop); // 0
// 3 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值。
box.scrollTop = 300; // 容器总高是300，可滚动值当然会小于300，这里设置了最大的300
console.log("scrollTop设置超出这个容器可滚动的值后 = ",box.scrollTop); // 100
// 即内容的高度 300 - box框的高度 200 = 100（最大可滚动的值）
</script>
</body>
</html>
