元素scroll系列属性

最新推荐文章于 2024-08-17 10:56:45 发布

夏大爷耶耶耶

最新推荐文章于 2024-08-17 10:56:45 发布

阅读量730

点赞数

分类专栏： JS笔记文章标签：前端

本文链接：https://blog.csdn.net/xy_is_fhh/article/details/121335537

版权

JS笔记专栏收录该内容

39 篇文章 3 订阅

订阅专栏

本文探讨了CSS中关于div元素的样式设置，包括宽度、高度、背景色、边框和内边距，以及如何利用JavaScript获取元素的scrollWidth、scrollHeight、scrollTop等属性。通过示例展示了当元素内容超出其显示范围时，如何监听滚动事件并获取滚动位置。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
			border: 10px solid red;
			padding: 20px;
			overflow: auto;
		}
	</style>
</head>

<body>
	<div>
		我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
	</div>
	<script>
		var div = document.querySelector('div');
		//scroll翻译过来是滚动的，使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。
		//1.element.scrollTop 返回被卷去的上侧距离，返回数值不带单位
		console.log(div.scrollTop);
		//2.element.scrollLeft 返回被卷去的左侧侧距离，返回数值不带单位
		//3.element.scrollWidth 返回自身实际的宽度，不含边框，返回数值不带单位
		console.log(div.scrollWidth);
		//4.element.scrollHeight 返回自身实际的高度，不含边框，返回数值不带单位
		console.log(div.scrollHeight);//返回高度是包括内容超出部分的

		//页面被卷去的头部
		//如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条，当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部，滚动条在滚动时会触发onscroll事件
		var div = document.querySelector('div');
		console.log(div.scrollHeight);
		console.log(div.clientHeight);
		//scroll滚动事件 当我们滚动条发生变化会触发的事件
		div.addEventListener('scroll', function () {
			console.log(div.scrollTop);
		});
	</script>
</body>

</html>