滚动条判断练习

最新推荐文章于 2022-07-05 18:59:47 发布

407指导员

最新推荐文章于 2022-07-05 18:59:47 发布

阅读量269

点赞数 1

分类专栏： # DOM 文章标签： js

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/109555213

版权

DOM 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

滚动条练习

目的：当我们阅读一些软件协议时，开始是灰色的。如果没有滚动到底部，无法点击确认，滚轮滑到底部就变成可点击。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动条训练</title>
    <style>
        #info {
            width: 300px;
            height: 500px;
            background-color: #bfa;
            overflow: auto;
        }
    </style>
    <script>
        window.onload = function () {
            /**
             * 功能：当垂直滚动条滚动到底时，底部注册按钮可以点击
             * onscroll
             *  -该事件将会在滚动条滚动时触发
             *  该事件绑定给滚动条的主人
             */
            let info = document.getElementById("info");
            let  inputs = document.getElementsByTagName("input");
            //为其绑定一个滚动条事件,滚动条滚动时触发
            info.onscroll = function () {
                //检查垂直滚动条是否到底
                if (info.scrollHeight - info.scrollTop == info.clientHeight) {
                    //info可以用this代替
                    //disabled值为true则元素禁用，如果false则可以使用
                     //inputs[0].setAttribute("disabled","false");
                    inputs[0].disabled = false;
                    inputs[1].disabled = false;
                    // inputs[1].setAttribute("disabled","false");

                }
            };


        };
    </script>
</head>
<body>
<h3>欢迎亲爱用户注册</h3>
<p id="info">
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
    你必须读完这些协议，否则无法注册。
</p>


<input type="checkbox" disabled="disabled"> 我已阅读协议，一定遵守
<!--如果在表单中使用disable属性，则表单项将变成不可用状态-->
<div><input type="submit" value="注册" disabled="disabled"></div>
</body>
</html>