JavaScript判断滚动条是否滚动到底部

简介

  1. scrollHeight
  2. scrollTop
  3. clientHeight

代码

核心代码: 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>

效果

运行效果

posted @ 2020-04-11 09:40  陈太浪  阅读(254)  评论(0)    收藏  举报