javascript/dom练习/实现一个用户注册协议的操作/onscroll滚动事件/判断用户协议是否滚动到底
一、效果要求：
一、需要用户将《用户注册协议》阅读完毕滚动到底部才能勾选同意用户协议
二、判断用户在勾选已同意协议后才能点击注册
三、用到的一些方法
-onscroll :该事件会在滚动条滚动时触发
-scrollHeight :返回整个可滚动区域高度
-scrollTop :此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离
-clientHeight :获取到元素包括内容区的高度数值（不带px）
效果图演示：
四、实现代码：
<html><head><meta charset="utf-8"><title></title><style> //css样式表单#info{width: 280px;height: 450px;background-color: #BFBFBF;overflow: auto;}</style><script type="text/javascript">
window.onload = function(){//1.获取info标签于表单项
var info = document.getElementById("info");
var inputs = document.getElementsByTagName("input");
//得到一个数组，包含两个input标签//2.为info绑定滚动条滚动事件info.onscroll = function(){//3.检查垂直滚动条是否滚动到底if(info.scrollHeight - info.scrollTop == info.clientHeight){//4.滚动到底后使表单项可用inputs[0].disabled = false;inputs[1].disabled = false;};};//5.为提交按钮绑定单击响应函数inputs[1].onclick = function(){if(inputs[0].checked==true){alert("注册成功");}else{alert("请先同意注册协议");}; }；}; </script></head><body><h3>欢迎用户注册</h3><h4>用户注册协议</h4><p id="info">亲爱的用户您好，请仔细阅读以下协议，否则将会无法注册。亲爱的用户您好，请仔细阅读以下协议，否则将会无法注册。亲爱的用户您好，请仔细阅读以下协议，否则将会无法注册。亲爱的用户您好，请仔细阅读以下协议，否则将会无法注册。亲爱的用户您好，请仔细阅读以下协议，否则将会无法注册。亲爱的用户您好，请仔细阅读以下协议，否则将会无法注册。亲爱的用户您好，请仔细阅读以下协议，否则将会无法注册。亲爱的用户您好，请仔细阅读以下协议，否则将会无法注册。亲爱的用户您好，请仔细阅读以下协议，否则将会无法注册。亲爱的用户您好，请仔细阅读以下协议，否则将会无法注册。亲爱的用户您好，请仔细阅读以下协议，否则将会无法注册。亲爱的用户您好，请仔细阅读以下协议，否则将会无法注册。亲爱的用户您好，请仔细阅读以下协议，否则将会无法注册。亲爱的用户您好，请仔细阅读以下协议，否则将会无法注册。亲爱的用户您好，请仔细阅读以下协议，否则将会无法注册。亲爱的用户您好，请仔细阅读以下协议，否则将会无法注册。亲爱的用户您好，请仔细阅读以下协议，否则将会无法注册。亲爱的用户您好，请仔细阅读以下协议，否则将会无法注册。亲爱的用户您好，请仔细阅读以下协议，否则将会无法注册。亲爱的用户您好，请仔细阅读以下协议，否则将会无法注册。亲爱的用户您好，请仔细阅读以下协议，否则将会无法注册。亲爱的用户您好，请仔细阅读以下协议，否则将会无法注册。亲爱的用户您好，请仔细阅读以下协议，否则将会无法注册。亲爱的用户您好，请仔细阅读以下协议，否则将会无法注</p><!-- disabled将标签变成禁用状态--><input type="checkbox" disabled="true"/>我已仔细阅读，并自愿遵守协议规则<br /><input type="submit" value="注册" disabled="true"/></body>
</html>//欢迎加我VX进群交流
vx账号：-Sep07
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！