JavaScript检测滚动条是否滚动到底部

最新推荐文章于 2022-08-05 10:32:34 发布

TomHe789

最新推荐文章于 2022-08-05 10:32:34 发布

阅读量167

点赞数

分类专栏： JavaScript 文章标签： javascript

转载请说明文章详细出处

本文链接：https://blog.csdn.net/weixin_44120487/article/details/105447285

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

简介

代码

核心代码: scrollHeight - scrollTop = clientHeight

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>滚动条练习</title>
        <style>
            p{
                width: 300px;
                height: 500px;
                background-color: skyblue;
                overflow: auto;
            }
        </style>
        <script>
            window.onload = function () {
                let info = document.getElementById("info");
                let inputs = document.getElementsByTagName("input");
                info.onscroll = function () {
                    //核心代码: scrollHeight - scrollTop = clientHeight
                    if (info.scrollHeight - info.scrollTop === info.clientHeight) {
                        inputs[0].disabled = false;
                        inputs[1].disabled = false;
    
                    }
                }
            };
        </script>
    </head>
    <body>
        <h3>请仔细阅读以下协议</h3>
        <p id="info">
            请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议 请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议请仔细阅读以下协议
        </p>
        <input type="checkbox" disabled = "disabled">我已仔细阅读
        <input type="submit" value="提交" disabled = "disabled">
    </body>
    </html>

运行效果

TomHe789

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript检测滚动条是否滚动到底部

简介scrollHeightscrollTopclientHeight代码核心代码: scrollHeight - scrollTop = clientHeight<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
复制链接

扫一扫

专栏目录