当我们进行网页开发到时候，有时候会出现容器里面的内容超过容器本身高度的情况，这时候就会有滚动，接下来就对有关滚动的相关属性和操作发表一下我个人的观点。

  1. 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.
.

Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生