js 滑动滚动条到最后阅读完毕才可提交

最新推荐文章于 2024-11-22 13:40:30 发布

原创最新推荐文章于 2024-11-22 13:40:30 发布 · 783 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

80 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的滚动条事件示例，通过监听滚动条的位置来控制表单的提交按钮状态，确保用户阅读完页面内容后才能提交。

文章目录

js DOM操作CSS样式

js DOM操作CSS样式

知识点

在这里插入图片描述

要求

必须滑动滚动条，滑动到最后阅读完毕才能提交
当垂直滚动条滚动到底时使表单项可用

实现代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8" />
	<title>js</title>
	<style type='text/css'>
		#info{
			width: 300px;
			height: 500px;
			background-color: #bfa;
			/*添加滚动条*/
			overflow: auto;
		}
	</style>
 	<script type="text/javascript">
 		window.onload = function(){

 			// 小实例--必需滑动滚动条，滑动到最后阅读完毕才能提交
 			// 当垂直滚动条滚动到底时使表单项可用
 			var info = document.getElementById('info');
 			var inputItem = document.getElementsByTagName('input');

 			// 为info绑定滚动事件
 			info.onscroll = function(){
 				// 判断滚动到底
 				if(info.scrollHeight - info.scrollTop == info.clientHeight){
 					// 设置表单项可用
 					inputItem[0].disabled = false;
 				}	
 			};
 		};		
	</script>
</head>
<body>
	<!-- 小实例 -->
	下面是个小实例，必需滑动滚动条，滑动到最后阅读完毕才能提交。
	<div>
		<h3> 欢迎注册</h3>
		<p id='info'>
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
			亲爱的用户请您认真阅读注册条款
		</p>
		<input type="checkbox" disabled="disabled">我已仔细阅读协议,并同意协议要求
		<input type="submit" value='注册'>
	</div>
</body>
</html>