网页-滚动条控制阅读协议勾选
站长
· 阅读数 53
网页-滚动条控制阅读协议勾选
-
CSS样式
<style>
.box {
margin: 100px auto;
width: 500px;
height: 500px;
background-color: thistle;
text-align: center;
}
#info {
margin: 10px auto;
width: 400px;
height: 350px;
overflow: auto;
}
</style>
-
JavaScript
<script>
window.onload=function(){
var info=document.getElementById("info");
var inputs=document.getElementsByTagName("input");
info.onscroll = function(){
if(parseInt(info.scrollHeight-info.scrollTop)==info.clientHeight){
inputs[0].disabled=false;
inputs[1].disabled=false;
}
};
// 谷歌的scrollTop有小数点，可以在scrollTop前加parseInt
};
</script>
-
html
<body>
<div class="box">
<h3>welcome!</h3>
<p id="info">please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read this please read </p>
<input id="hi" type="checkbox" disabled="disabled">我已仔细阅读
<input id="hello" type="submit" value="注册" disabled="disabled">
</div>
</body>
-
运行效果展示
希望可以帮助到你！
转载自:https://juejin.cn/post/7087467465428434975