滚动条实列

最新推荐文章于 2025-05-05 14:12:43 发布

PanPan855

最新推荐文章于 2025-05-05 14:12:43 发布

阅读量172

点赞数

文章标签： javascript css html html5

本文链接：https://blog.youkuaiyun.com/qq_39451795/article/details/107482847

版权

滚动条

在这里插入图片描述

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>滚动条</title>
		<h1>滚动条实列</h1>
		<script type="text/javascript">
			function init() {
				var obj = document.getElementById("box");
				//元素的宽和度：不含滚动条中的内容
				var width = obj.offsetWidth;
				var height = obj.offsetHeight;
				//元素的宽和高：含滚动条中的内容
				var width1 = obj.scrollWidth;
				var height1 = obj.scrollHeight;
				//滚动过的距离
				var scrollheight = obj.scrollTop;
				//构建输出内容
				var str = "<b>不含滚动条：</b>width=" + width + ",height=" + height;
				str += "<br><b>含滚动条：</b>width=" + width1 + ",height=" + height1;
				str += "<br><b>滚动过的距离：</b>" + scrollheight;
				var result = document.getElementById("result");
				result.innerHTML = str;
			}
		</script>
		<style type="text/css">
			#box {
				width: 600px;
				height: 300px;
				overflow: scroll;
				border: 1px solid #ff0000;
			}
		</style>

	</head>

	<body>
		<div id="result"></div>
		<div id="box" onscroll="init()">
			1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111 1111111111111111111111111111111111

		</div>
	</body>

</html>