JavaScript:onscroll函数

onscroll() 是检测页面是否滚动的函数,常用在页面的动态加载中,这里借用一个阅读协议的小例子来试验一下,回头会有动态加载页面的小实验给大家分享。

代码如下:

1 JS 代码:

<script type="text/javascript">
   window.οnlοad=function(){
       var p=document.getElementById("info");
       var xu=document.getElementById("xu");
       var btn=document.getElementById("btn");
       //检查对象p的滚动是否已经滑动
       p.οnscrοll=function(){
           //判断是否滑动到了底部,如果是,则按钮可用
           if(p.scrollHeight-p.scrollTop==p.clientHeight){
               xu.disabled=false;
               btn.disabled=false;
           }
       };
       //测试btn按钮
       btn.οnclick=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>

复制代码,可看运行结果,为滑动到协议底部才能进行操作。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值