《JavaScript视频19》其他样式相关属性-优快云博客

此示例代码展示了如何使用JavaScript监听网页滚动事件，当用户滚动到预读区域底部时，启用同意协议的复选框和提交按钮。通过clientHeight、scrollHeight、scrollTop等属性判断滚动状态，实现对用户协议阅读的确认机制。

其他相关属性

clientWidth 、clientHeight 可以返回可见宽度和高度，包括内容区和内边距，直接返回数值，不带单位，并且都是只读属性，不能通过赋值修改。
offsetWidth、 offsetHeight 可以获取元素总宽高，包括边框。
offsetParent 获取离当前元素最近的开启了定位的祖先元素，如果都没开启，则返回body
offsetLeft、offsetTop 当前元素相对于定位父元素的偏移量
scrollHeight、scrollWidth可以显示滚动区域的大小
scrollLeft、scrollTop可以获取滚动条的位置

当scrollHeight - scrollTop == clientHeight时，说明滚动到底了。

霸王条款：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#preRead{
				width: 200px;
				height: 400px;
				background-color: #bfa;
				overflow: auto;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				var preRead = document.getElementById("preRead");
				var input = document.getElementsByTagName("input")
				
				//onscroll事件会在滚动条滚动的时候触发
				preRead.onscroll = function(){
					if (preRead.scrollHeight - preRead.scrollTop == preRead.clientHeight){
						input[0].disabled = false;
						input[1].disabled = false;
					};	
				}
			};
		</script>
	</head>
	<body>
		<h4>用户协议</h4>
		<p id= "preRead">
			亲爱的用户，如果你不阅读，你就不能注册
			亲爱的用户，如果你不阅读，你就不能注册
			亲爱的用户，如果你不阅读，你就不能注册
			亲爱的用户，如果你不阅读，你就不能注册
			亲爱的用户，如果你不阅读，你就不能注册
			亲爱的用户，如果你不阅读，你就不能注册
			亲爱的用户，如果你不阅读，你就不能注册
			亲爱的用户，如果你不阅读，你就不能注册
			亲爱的用户，如果你不阅读，你就不能注册
			亲爱的用户，如果你不阅读，你就不能注册
			亲爱的用户，如果你不阅读，你就不能注册
			亲爱的用户，如果你不阅读，你就不能注册
			亲爱的用户，如果你不阅读，你就不能注册
			亲爱的用户，如果你不阅读，你就不能注册
			亲爱的用户，如果你不阅读，你就不能注册
			亲爱的用户，如果你不阅读，你就不能注册
			亲爱的用户，如果你不阅读，你就不能注册
			亲爱的用户，如果你不阅读，你就不能注册
			亲爱的用户，如果你不阅读，你就不能注册
			亲爱的用户，如果你不阅读，你就不能注册
			亲爱的用户，如果你不阅读，你就不能注册
			亲爱的用户，如果你不阅读，你就不能注册
		</p>
		
		<input type="checkbox" disabled="disabled"/>我已仔细阅读协议，一定遵守
		<input type="submit" value="提交" disabled="disabled"/>
	</body>
</html>