当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 滚动条实列

滚动条实列

2020年07月22日  | 移动技术网IT编程  | 我要评论

滚动条

在这里插入图片描述

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

本文地址：https://blog.csdn.net/qq_39451795/article/details/107482847

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网