disabled 属性可设置或返回是否禁用 checkbox。
语法：Object.disabled=true|false
true表示禁用 false表示可用

clientWidth clientHeight
这两个属性都可以获取元素的可见高度和宽度
会获取元素的宽度和高度，包括内容区和内边距

offsetWidth offsetHeight
获取元素的整个宽度和高度，包括内容区和内边距，边框

scrollLeft 可以获取水平滚动条的距离
scrollTop 可以获取垂直滚动条的距离

scrollWidth scrollHeight
可以获取元素整个滚动区域的宽度和高度

等式成立时表示垂直滚动条到达最底部
Object.scrollHeight-Object.scrollTop==Object.clientHeight

等式成立时表示水平滚动条到达最右端
当满足Object.scrollWidth-Object.scrollLeft==Object.clientWidth

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>滚动条练习</title>
    <style>
        #info {
            width: 300px;
            height: 500px;
            background-color: #bfa;
            overflow: auto;
        }
    </style>
    <script>
        window.onload = function() {
            /*
            当垂直滚动条到底时使表单项可用
            onscroll
            	该事件会在元素的滚动的时候触发
            */
            //获取id为info的p元素
            var info = document.getElementById("info");
            var btn01 = document.getElementById("btn01");
            var btn02 = document.getElementById("btn02");
            //为info绑定一个滚动条滚动事件
            info.onscroll = function() {
                //检查垂直滚动条是否到底部
                if (info.scrollHeight - info.scrollTop == info.clientHeight) {
                    //到底部使表单项可用
                    btn01.disabled = false;
                    btn02.disabled = false;
                }
            }

            //我们还要实现必须要勾选第一个按钮，才能按下提交按钮
            btn02.onclick = function() {
                if (btn01.checked == true) {
                    alert("恭喜您注册成功！");
                } else {
                    alert("请勾选前面的协议条款，谢谢！");
                }
            }
        }
    </script>
</head>

<body>
    <h1>欢迎亲爱的用户注册</h1>
    <p id="info">
        巷口灯光忽明忽灭 手中甜咖啡已冷却 嘴角不经意泄露想念 在发呆的窗前凝结 其实不爱漫漫长夜 因为你才多了情结 可是蜷缩的回忆不热烈 我如何把孤单融解 你看啊春日的蝴蝶 你看它颤抖着飞越 和风与暖阳倾斜 却冰冷 的季节 你看啊仲夏的弯月 你看它把欢愉偷窃 倒挂天际的笑靥 故事里的最后一页 过往和光阴都重叠 我用尽所有字眼去描写 无法留你片刻停歇 你听啊秋末的落叶 你听它叹息着离别 只剩我独自领略 海与山 风和月 你听啊冬至的白雪 你听它掩饰着哽咽 在没有你的世界 你听啊秋末的落叶 你听它叹息着离别
        只剩我独自领略 海与山 风和月 你听啊冬至的白雪 你听它掩饰着哽咽 在没有你的世界 再没有你的冬眠巷口灯光忽明忽灭 手中甜咖啡已冷却 嘴角不经意泄露想念 在发呆的窗前凝结 其实不爱漫漫长夜 因为你才多了情结 可是蜷缩的回忆不热烈 我如何把孤单融解 你看啊春日的蝴蝶 你看它颤抖着飞越 和风与暖阳倾斜 却冰冷 的季节 你看啊仲夏的弯月 你看它把欢愉偷窃 倒挂天际的笑靥 故事里的最后一页 过往和光阴都重叠 我用尽所有字眼去描写 无法留你片刻停歇 你听啊秋末的落叶 你听它叹息着离别 只剩我独自领略
        海与山 风和月 你听啊冬至的白雪 你听它掩饰着哽咽 在没有你的世界 你听啊秋末的落叶 你听它叹息着离别 只剩我独自领略 海与山 风和月 你听啊冬至的白雪 你听它掩饰着哽咽 在没有你的世界 再没有你的冬眠巷口灯光忽明忽灭 手中甜咖啡已冷却 嘴角不经意泄露想念 在发呆的窗前凝结 其实不爱漫漫长夜 因为你才多了情结 可是蜷缩的回忆不热烈 我如何把孤单融解 你看啊春日的蝴蝶 你看它颤抖着飞越 和风与暖阳倾斜 却冰冷 的季节 你看啊仲夏的弯月 你看它把欢愉偷窃 倒挂天际的笑靥 故事里的最后一页
        过往和光阴都重叠 我用尽所有字眼去描写 无法留你片刻停歇 你听啊秋末的落叶 你听它叹息着离别 只剩我独自领略 海与山 风和月 你听啊冬至的白雪 你听它掩饰着哽咽 在没有你的世界 你听啊秋末的落叶 你听它叹息着离别 只剩我独自领略 海与山 风和月 你听啊冬至的白雪 你听它掩饰着哽咽 在没有你的世界 再没有你的冬眠说巷口灯光忽明忽灭 手中甜咖啡已冷却 嘴角不经意泄露想念 在发呆的窗前凝结 其实不爱漫漫长夜 因为你才多了情结 可是蜷缩的回忆不热烈 我如何把孤单融解 你看啊春日的蝴蝶 你看它颤抖着飞越
        和风与暖阳倾斜 却冰冷 的季节 你看啊仲夏的弯月 你看它把欢愉偷窃 倒挂天际的笑靥 故事里的最后一页 过往和光阴都重叠 我用尽所有字眼去描写 无法留你片刻停歇 你听啊秋末的落叶 你听它叹息着离别 只剩我独自领略 海与山 风和月 你听啊冬至的白雪 你听它掩饰着哽咽 在没有你的世界 你听啊秋末的落叶 你听它叹息着离别 只剩我独自领略 海与山 风和月 你听啊冬至的白雪 你听它掩饰着哽咽 在没有你的世界 再没有你的冬眠
    </p>
    <!--如果表单项添加	disabled="disabled"，则表单项将变为不可用状态-->
    <input type="checkbox" disabled="disabled" id="btn01">我已仔细阅读该协议并遵守
    <input type="submit" disabled="disabled" value="注册" id="btn02">
</body>

</html>

其他浏览器都可以除了chrome


愿你的坚持终有收获