滚动到底部 才可以注册 勾选协议 练习

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
     #info{
       width: 300px;
       height: 500px;
       background-color: #bfa;
       overflow: auto;
     }

  </style>
  <script>

    window.onload = function(){
       
      /**
       *  当 垂直滚动条 滚动到底时 使 表单项 可用
      */

      var info = document.getElementById("info"); 
      // 获取两个 表单项
      var inputs = document.getElementsByTagName('input');

      // 为info 绑定一个 滚动条滚动事件
      info.onscroll = function(){  
        // 检查滚动条 是否 滚动到底
        if(Math.floor(info.scrollHeight - info.scrollTop) == info.clientHeight){
            //  滚动到底 使表单项可用

            /**
             * disabled 设置元素是否禁用
             *  true 禁用
             *  false 可用
            */
            inputs[0].disabled = false
            inputs[1].disabled = false
        }
      } 
      }

  </script>
 
</head>
<body>

   <h3>欢迎用户注册</h3>

   <p id="info">
    阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
    阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
    议阅读协议阅读协议阅读协
    议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
    议阅读协议阅读协议阅读协
    议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
    议阅读协议阅读协议阅读协
    议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
    议阅读协议阅读协议阅读协
    议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
    议阅读协议阅读协议阅读协
    议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
    议阅读协议阅读协议阅读协
    议阅读协议阅读协议阅读协议阅读协议阅读协议
     议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
     阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
     议阅读协议阅读协议阅读协
     议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
     议阅读协议阅读协议阅读协
     议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
     议阅读协议阅读协议阅读协
     议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
     议阅读协议阅读协议阅读协
     议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
     议阅读协议阅读协议阅读协
     议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
     议阅读协议阅读协议阅读协
     议阅读协议阅读协议阅读协议阅读协议阅读协议
      议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
      阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协议阅读协议阅读协议
       议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
      阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协
      议阅读协议阅读协议阅读协议阅读协议阅读协议
       议阅读协议阅读协议阅读协议阅读协议阅读协议
      </p>  

      <input  type="checkbox" disabled/>我以阅读协议 
      <input  type="submit"  value="注册" disabled/>
</body>
</html>
posted @ 2021-05-05 23:50  13522679763-任国强  阅读(314)  评论(0)    收藏  举报