js实现阅读全部协议后（滚动条拉到底）才允许注册

效果截图：

在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.div{
		margin:0 auto;
		width: 300px;
	}
		#info{
			width: 300px;
			height: 500px;
			font-size: 23px;
			background-color: lightpink;
			overflow: auto;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			//当滚动条滚动到底时使表单项可用
			var info=document.getElementById("info");
			var inputs=document.getElementsByTagName("input");
			info.onscroll=function(){
				if (info.scrollHeight-info.scrollTop==info.clientHeight) {
					inputs[0].disabled=false;
					inputs[1].disabled=false;
				}
			}
		}
	</script>
</head>
<body>
	<div class="div">
		<h3>欢迎亲爱的用户注册</h3>
		<p id="info">
			<!--协议内容-->
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册。
		</p>
		<input type="checkbox" disabled="disabled">我已仔细阅读协议，一定遵守
		<input type="submit" value="注册" disabled="disabled">
	</div>
</body>
</html>
若年封尘
发布了100 篇原创文章 · 获赞 240 · 访问量 2万+
私信关注
js实现阅读全部协议后（滚动条拉到底）才允许注册

效果截图：

代码实现：

猜你喜欢
