对Javascript中滚动属性(scrollTop,scrollLeft,scrollHeight,scrollWidth)的解释和相关DOM操作
当我们进行网页开发到时候，有时候会出现容器里面的内容超过容器本身高度的情况，这时候就会有滚动，接下来就对有关滚动的相关属性和操作发表一下我个人的观点。
- scrollTop:scrollTop指的是“容器中的内容”超出“容器上边界”的那部分我们“看不见的高度”。也就是说scrollTop表示元素向上滚动的尺寸。接下来通过具体事例让我们得出scrollTop和scrollLeft的具体取值范围到底是多少？
css部分：
<style type="text/css">
#container{
width: 200px;
height: 200px;
background-color: green;
overflow: auto;
}
#inner{
width: 150px;
height: 400px;
background-color: yellow;
}
</style>
html部分：
<body>
<div id="container">
<div id="inner">容器里面的内容</div>
</div>
</body>
容器container的高度是200px,容器里面的内容inner的高度为400px,此时容器里面的内容超出了容器本身，此时容器元素将overflow设置为auto时，就会在垂直方向出现滚动条。那么滚动高度的取值范围到底是多少呢？正如前面所说，scrollTop是在container里面看不见的那一部分内容的高度，所以初始状态，inner的上边界和container的上边界重合，此时scrollTop=0;当滚动条滚动的时候，inner的部分内容超出container,scrollTop的值也随之变大，最大的时候为inner的下边界和container的上边界重合，此时scrollTop = 400-200=200。
<script>
window.onload = ()=>{
const container = document.getElementById('container');
const innerContent = document.getElementById('inner');
container.onscroll = ()=>{
console.log(container.scrollTop)
}
}
</script>
为container绑定onscroll事件，可以在console打印出scrollTop的值，范围为0-200.这也就是对scrollTop属性的读取操作。
<body>
<div id="container">
<div id="inner">容器里面的内容</div>
</div>
设置scrollTop的值为:<input id='input' type="text" placeholder="设置scrollTop的值为">
<button id = "btn">设置</button>
</body>
<script>
window.onload = ()=>{
const container = document.getElementById('container');
const inputValue = document.getElementById('input');
const btn = document.getElementById('btn');
btn.addEventListener('click',()=>{
container.scrollTop = inputValue.value;
},false)
}
可以通过上述container.scrollTop=***对scrollTop的值进行设置。
2.scrollLeft：scrollLeft的理解同scrollTop.
3.scrollHeight:scrollHeight是个只读属性，表示的是内容高度尺寸，包括由于滚动而导致不可见的那部分高度尺寸。可分为不出现滚动条和出现滚动条两种情况
(1)不出现滚动条
html部分
<body>
<div id="container">
<div id="inner">容器里面的内容</div>
</div>
</body>
css部分
#container{
width: 200px;
height: 200px;
border: 5px solid blue;
margin: 5px;
padding: 5px;
background-color: green;
overflow: auto;
}
#inner{
width: 180px;
height: 100px;
background-color: yellow;
}
JS
console.log(container.scrollHeight);
此时没有出现滚动条，container.scrollHeight的值为210.即container的高度+padding的高度。但是不包含margin和border.即container所能容纳内容的高度。
（2）出现滚动条
#container{
width: 200px;
height: 200px;
border: 5px solid blue;
margin: 5px;
padding: 5px;
background-color: green;
overflow: auto;
}
#inner{
width: 100px;
height: 400px;
border: 5px solid red;
margin: 5px;
padding: 5px;
background-color: yellow;
}
container.scrollHeight的值为400.container.scrollHeight=inner.height+inner.border2
innermargin2+inner.padding2+container.padding*2.
由此可以得出当出现滚动的时候判断inner的下边界和container的上边界时候重合的条件为：
container.scrollHeight - container.clientHeight == container.scrollTop?yes:no;
4.scrollWidth：scrollWidth同scrollHeight.
.