javascript小练习（关于滚动条滚动到底才能进行的操作）

最新推荐文章于 2023-11-13 16:20:23 发布

youknowml

最新推荐文章于 2023-11-13 16:20:23 发布

阅读量219

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/yrhlyyouknow/article/details/107419787

版权

本文介绍了如何使用JavaScript实现只有当滚动条滚动到底部时才会触发特定操作的技巧，适用于加载更多内容或无限滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	<style type="text/css">
		#info{
			width:300px;
			height:500px;
			background-color:#bfa;
			overflow:auto;
		}
		</style>
		
	<script type="text/javascript">
		window.onload=function(){
			
			/* 当垂直滚动条滚动到底的时候表单项可用 */
			/* onscroll:该事件会在元素的滚动条滚动的时候触发, */
			//获取id 为info 的元素
			
			var info=document.getElementById("info");
			//获取两个表单项
			var inputs=document.getElementsByTagName("input");
			//为info 绑定一个滚动条滚动的事件
			info.onscroll=function(){
				
				//检查垂直滚动条是否滚动到底
				if(info.scrollHeight - info.scrollTop==info.clientHeight){
					//滚动条滚动到底，使表单可用
					//disabled 属性可以设置一个元素是否禁用，如果设置为true，
					//则元素禁用，如果设置成为false 则元素可用
					
					inputs[0].disabled=false;
					inputs[1].disabled=false;
					
				}
			};
			
			
			
			
		};
	
		</script>
		</head>
	<body>
		<h3>欢迎亲爱的用户注册</h3>
		<p id="info">
			亲爱的用户，请仔细阅读以下的协议，如果你不是仔细阅读的话你就别注册
			亲爱的用户，请仔细阅读以下的协议，如果你不是仔细阅读的话你就别注册
			亲爱的用户，请仔细阅读以下的协议，如果你不是仔细阅读的话你就别注册
			亲爱的用户，请仔细阅读以下的协议，如果你不是仔细阅读的话你就别注册
			亲爱的用户，请仔细阅读以下的协议，如果你不是仔细阅读的话你就别注册
			亲爱的用户，请仔细阅读以下的协议，如果你不是仔细阅读的话你就别注册
			亲爱的用户，请仔细阅读以下的协议，如果你不是仔细阅读的话你就别注册
			亲爱的用户，请仔细阅读以下的协议，如果你不是仔细阅读的话你就别注册
			亲爱的用户，请仔细阅读以下的协议，如果你不是仔细阅读的话你就别注册
			亲爱的用户，请仔细阅读以下的协议，如果你不是仔细阅读的话你就别注册
			亲爱的用户，请仔细阅读以下的协议，如果你不是仔细阅读的话你就别注册
			亲爱的用户，请仔细阅读以下的协议，如果你不是仔细阅读的话你就别注册
			亲爱的用户，请仔细阅读以下的协议，如果你不是仔细阅读的话你就别注册
			亲爱的用户，请仔细阅读以下的协议，如果你不是仔细阅读的话你就别注册
			亲爱的用户，请仔细阅读以下的协议，如果你不是仔细阅读的话你就别注册
			亲爱的用户，请仔细阅读以下的协议，如果你不是仔细阅读的话你就别注册
			亲爱的用户，请仔细阅读以下的协议，如果你不是仔细阅读的话你就别注册
			亲爱的用户，请仔细阅读以下的协议，如果你不是仔细阅读的话你就别注册
			亲爱的用户，请仔细阅读以下的协议，如果你不是仔细阅读的话你就别注册
			亲爱的用户，请仔细阅读以下的协议，如果你不是仔细阅读的话你就别注册亲爱的用户，请仔细阅读以下的协议，如果你不是仔细阅读的话你就别注册
			亲爱的用户，请仔细阅读以下的协议，如果你不是仔细阅读的话你就别注册
			
			</p>
			<!-- 如果为表单项添加一个disabled 属性的话，那么它将变为不可用的一个状态 -->
			<input type="checkbox" disabled="disabled"/>我已仔细阅读协议
			<input type="submit" value="注册" disabled="disabled"/>
			
		
	</body>
</html>

在这里插入图片描述