滚动条滚动事件练习,将滚动条拖到最底下时才能触发表单项。
-------------当滚动条滚动到最底下时,才能选中多选框以及点击注册按钮
##滚动条滚动事件练习
<!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也不能进行点击
当滚到最底下时可以进行选中,注册也可点击
可以简单的为注册按钮设置一个弹窗,表示在滚动框滚动到最底下时按钮可按。