1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Title</title>
    6.   <style>
    7.     * {
    8.       margin: 0;
    9.       padding: 0;
    10.     }
    11.     .container {
    12.       margin: 30px auto;
    13.       width: 600px;
    14.     }
    15.     .container .box {
    16.       width: 300px;
    17.       height: 300px;
    18.       margin: 10px auto;
    19.       overflow-y: scroll;
    20.       border: 1px solid #000;
    21.     }
    22.     .container .btn-wrapper {
    23.       width: 300px;
    24.       margin: 30px auto;
    25.     }
    26.     .btn-wrapper button {
    27.       width: 70px;
    28.       height: 40px;
    29.       text-align: center;
    30.       font-size: 20px;
    31.       border-radius: 5px;
    32.     }
    33.     .btn-wrapper button.cancel:hover {
    34.       background: #00b38a;
    35.       color: #ffff;
    36.     }
    37.     .btn-wrapper button.cancel:focus {
    38.       outline: none;
    39.       border: none;
    40.     }
    41.     .btn-wrapper button:visited {
    42.       outline: none;
    43.       border: none;
    44.     }
    45.     button:disabled:hover {
    46.       cursor: not-allowed;
    47.     }
    48.   </style>
    49. </head>
    50. <body>
    51. <div class="container">
    52.   <div id="box" class="box">
    53.     鉴于目前安投融（北京）网络科技有限公司（爱投资平台运营主体）在北京市海淀区中科资源大厦原有办公场地租赁合同约定期限临近到期，因为持续有个别出借人在工作场地的过激行为造成物业侧不良影响，物业目前不同意续租，因此平台办公地点可能搬离，目前也在积极与物业协商续约可能。
    54.     同时，平台也在积极寻找附近新的合适办公场地，如确认搬迁，会在搬迁完毕后第一时间通过网站公布新办公场地。请各位出借人了解并悉知，切勿造成不必要的恐慌和听信谣言。
    55.     鉴于目前安投融（北京）网络科技有限公司（爱投资平台运营主体）在北京市海淀区中科资源大厦原有办公场地租赁合同约定期限临近到期，因为持续有个别出借人在工作场地的过激行为造成物业侧不良影响，物业目前不同意续租，因此平台办公地点可能搬离，目前也在积极与物业协商续约可能。
    57.     同时，平台也在积极寻找附近新的合适办公场地，如确认搬迁，会在搬迁完毕后第一时间通过网站公布新办公场地。请各位出借人了解并悉知，切勿造成不必要的恐慌和听信谣言。
    59.     鉴于目前安投融（北京）网络科技有限公司（爱投资平台运营主体）在北京市海淀区中科资源大厦原有办公场地租赁合同约定期限临近到期，因为持续有个别出借人在工作场地的过激行为造成物业侧不良影响，物业目前不同意续租，因此平台办公地点可能搬离，目前也在积极与物业协商续约可能。
    61.     同时，平台也在积极寻找附近新的合适办公场地，如确认搬迁，会在搬迁完毕后第一时间通过网站公布新办公场地。请各位出借人了解并悉知，切勿造成不必要的恐慌和听信谣言。
    63.   </div>
    64.   <div class="btn-wrapper">
    65.     <button class="cancel">取消</button>
    66.     <button class="confirm" disabled>确定</button>
    67.   </div>
    68. </div>
    70. <script>
    71.   let box = document.getElementById('box');
    72.   let confirm = document.getElementsByClassName('confirm')[0];
    73.   confirm.onclick = function () {
    74.     console.log('恭喜你成功注册');
    75.   };
    77.   // 当用户协议滚动到底时，确认按钮可以点击
    78.   // 如何确定滚动到底了？ 监听 box 的滚动事件（onscroll），当滚动时就会触犯事件函数，在事件函数中计算是否滚动到底了。是否滚动到底的关键在于确定可以滚动的最大值是多少？
    79.   // 可以滚动的最大值就是溢出的部分，而scrollHeight = clientHeight + 溢出部分；所以溢出部分 = scrollHeight - clientHeight
    80.   let maxTop = box.scrollHeight - box.clientHeight;
    81.   box.onscroll = function () {
    82.     // console.log('滚了');
    83.     // 判断当前滚动条卷去的高度和最大值的关系，如果大于等于最大值说明已经滚动到底了
    84.     if (box.scrollTop >= maxTop) {
    85.       // 满足这个条件证明滚动到底了
    86.       confirm.disabled = false; // 解除按钮的禁用
    87.     } else {
    88.       confirm.disabled = true;
    89.     }
    90.   }
    91. </script>
    92. </body>
    93. </html>