用javascript编写一个用户阅读须知简单练习,滚动条滚动事件练习,将滚动条拖到最底下时才能触发表单项。

滚动条滚动事件练习,将滚动条拖到最底下时才能触发表单项。

-------------当滚动条滚动到最底下时,才能选中多选框以及点击注册按钮

 ##滚动条滚动事件练习
 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>	
			#p1{
    
    
				width: 400px;
				height: 500px;
				background-color: beige;
				overflow: auto;
			}
		</style>
		<script>
			window.onload=function(){
    
    
				// 当垂直滚动条到底,表单项可以用
				
				// 获取id为p1的元素
				 var p1=document.getElementById("p1");
				 var inputs=document.getElementsByTagName("input");
				 var put1=document.getElementById("put1");
				 
				 // 为p1绑定滚动条滚动事件
				 p1.onscroll=function(){
    
    
					// 检查滚动条是否滚动到底
					if(p1.scrollHeight-p1.scrollTop == p1.clientHeight){
    
    
						// 滚动条滚到底表单项可以用
					// disabled设置一个元素是否禁用。true即为禁用,false使用
				    	inputs[0].disabled=false;
						inputs[1].disabled=false;
					};
				 };
				  put1.onclick=function(){
    
    
					 alert("不让你注册");
				 }
			}
		</script>
	</head>
	<body>
		<h1>注册页面</h1>
		<P id="p1">
			请仔细阅读这篇文章,不然就不能注册 请仔细阅读这篇文章,
			不然就不能注册 请仔细阅读这篇文章,不然就不能注册 请仔细阅读这篇

		</P>
		<!-- p元素随便写什么 这里就只复制了一部分,可以多复制很多行-->
		<!--  disabled="disabled表单项为不可用状态 -->
		<input type="checkbox" disabled="disabled"/>仔细阅读以下文档
		<input id="put1" type="submit" disabled="disabled" value="注册" />	
	</body>
</html>

网页简单页面图片显示:

在这里插入图片描述当滚动条还在上面时,底下的checkbox不能选中,submit也不能进行点击

在这里插入图片描述当滚到最底下时可以进行选中,注册也可点击
在这里插入图片描述可以简单的为注册按钮设置一个弹窗,表示在滚动框滚动到最底下时按钮可按。

猜你喜欢

转载自blog.csdn.net/mddgxz/article/details/115145316