onscroll() 是检测页面是否滚动的函数,常用在页面的动态加载中,这里借用一个阅读协议的小例子来试验一下,回头会有动态加载页面的小实验给大家分享。
代码如下:
1 JS 代码:
<script type="text/javascript">
window.onload=function(){
var p=document.getElementById("info");
var xu=document.getElementById("xu");
var btn=document.getElementById("btn");
//检查对象p的滚动是否已经滑动
p.onscroll=function(){
//判断是否滑动到了底部,如果是,则按钮可用
if(p.scrollHeight-p.scrollTop==p.clientHeight){
xu.disabled=false;
btn.disabled=false;
}
};
//测试btn按钮
btn.onclick=function(){
alert("afds");
}
}
</script>
2 HTML代码(P 中为文本):
<h3>请阅读以下协议</h3>
<br>
<p id="info">
请阅读以下协议:请阅读以下协议:请阅读以下协议:请阅读以下协议:
请阅读以下协议
请阅读以下协议:请阅读以下协议:请阅读。。。。
。。。。
</p>
<input type="checkbox" disabled="disabled" id="xu">我已经阅读完了
<button id="btn" disabled="disabled">提交</button>
3 CSS 代码:
<style type="text/css">
#info{
width:100px;
height:200px;
overflow:auto;
}
</style>
复制代码,可看运行结果,为滑动到协议底部才能进行操作。