对Javascript中滚动属性(scrollTop,scrollLeft,scrollHeight,scrollWidth)的解释和相关DOM操作

最新推荐文章于 2023-03-24 17:04:49 发布

夭夭（yoo）

最新推荐文章于 2023-03-24 17:04:49 发布

阅读量4k

点赞数 1

本文链接：https://blog.csdn.net/GuoXiaoHong7758521/article/details/90312632

版权

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

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;
}

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

夭夭（yoo）

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫