zoukankan      html  css  js  c++  java
  • JavaScript判断滚动条是否滚动到底部

    简介

    1. scrollHeight
    2. scrollTop
    3. clientHeight

    代码

    核心代码: scrollHeight - scrollTop = clientHeight

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>滚动条练习</title>
        <style>
            p{
                 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>
    

    效果

    运行效果

  • 相关阅读:
    进程和程序
    linux socket基本知识
    window核心编程 第五章 作业
    树的基本操作(C语言)
    每天都在反省自己,但是每天却都浑浑噩噩
    Windows核心编程 内核对象
    还没完整看过一本技术的书籍啊
    管道
    Memory Layout of a C Program(7.6)
    cpio命令用法
  • 原文地址:https://www.cnblogs.com/TomHe789/p/12677802.html
Copyright © 2011-2022 走看看