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

简介

代码

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

原文地址：https://www.cnblogs.com/TomHe789/p/12677802.html