JS基础-用户注册阅读

最新推荐文章于 2021-06-26 21:22:44 发布

linqunbin

最新推荐文章于 2021-06-26 21:22:44 发布

阅读量110

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/linqunbin/article/details/90815269

版权

JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

垂直滚动条拉到底后,才允许注册:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        #info{
            width: 300px;
            height: 500px;
            background-color: darkgrey;
            overflow: scroll;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            /*
                当垂直滚动条滚动到底时,使表单项可用.
                onscroll
                -该事件会在元素滚动条滚动时触发
            */
            // 获取滚动条元素
            var info = document.getElementById('info');
            // 为info绑定滚动条滚动的事件
            info.onscroll = function(){
                // 检查垂直滚动条是否滚动到底了
                if(info.scrollHeight - info.scrollTop == info.clientHeight){
                    console.log(info.scrollHeight, info.scrollTop, info.clientHeight);
                    var inputs = document.getElementsByTagName('input');
                    for(let i=0; i<inputs.length; i++){
                        // 如果为表单项添加disabled=false,则表单项将变成可用的状态
                        inputs[i].disabled = false; 
                    };
                };
            };
        };
    </script>
</head>
<body>
    <h3>欢迎用户注册</h3>
    <p id="info">
        欢迎用户注册,请仔细阅读才能注册,否则不允许你注册.
        欢迎用户注册,请仔细阅读才能注册,否则不允许你注册.
        欢迎用户注册,请仔细阅读才能注册,否则不允许你注册.
        欢迎用户注册,请仔细阅读才能注册,否则不允许你注册.
        欢迎用户注册,请仔细阅读才能注册,否则不允许你注册.
        欢迎用户注册,请仔细阅读才能注册,否则不允许你注册.
        欢迎用户注册,请仔细阅读才能注册,否则不允许你注册.
        欢迎用户注册,请仔细阅读才能注册,否则不允许你注册.
        欢迎用户注册,请仔细阅读才能注册,否则不允许你注册.
        欢迎用户注册,请仔细阅读才能注册,否则不允许你注册.
        欢迎用户注册,请仔细阅读才能注册,否则不允许你注册.
        欢迎用户注册,请仔细阅读才能注册,否则不允许你注册.
        欢迎用户注册,请仔细阅读才能注册,否则不允许你注册.
        欢迎用户注册,请仔细阅读才能注册,否则不允许你注册.
        欢迎用户注册,请仔细阅读才能注册,否则不允许你注册.
        欢迎用户注册,请仔细阅读才能注册,否则不允许你注册.
        欢迎用户注册,请仔细阅读才能注册,否则不允许你注册.
        欢迎用户注册,请仔细阅读才能注册,否则不允许你注册.
    </p>
    <!-- 如果为表单项添加disabled=true,则表单项将变成不可用的状态 -->
    <input type="checkbox" disabled=true>我已仔细阅读.
    <input type="submit" disabled=true value="注册">
</body>
</html>

linqunbin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础-用户注册阅读

垂直滚动条拉到底后,才允许注册:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
复制链接

扫一扫

专栏目录