监听滚动条触底

最新推荐文章于 2024-05-28 09:49:24 发布

越来越好。

最新推荐文章于 2024-05-28 09:49:24 发布

阅读量2.2k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_38880700/article/details/91873179

版权

前端专栏收录该内容

133 篇文章 3 订阅

订阅专栏

监听滚动条触底。作为记录。

    <!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">
        <style>
            p {
                user-select: none;
                background: seagreen;
                padding: 20px;
            }

            p:first-child {
                background: salmon;
            }

            p:last-child {
                background: orchid;
            }
        </style>
        <title>测试下拉滚动条</title>
    </head>

    <body>
        <p>11111111111111111</p>
        <p>22222222222222222</p>
        <p>33333333333333333</p>
        <p>44444444444444444</p>
        <p>55555555555555555</p>
        <p>66666666666666666</p>
        <p>77777777777777777</p>
        <p>88888888888888888</p>
        <p>99999999999999999</p>
        <p>11111111111111111</p>
        <p>22222222222222222</p>
        <p>33333333333333333</p>
        <p>44444444444444444</p>
    </body>
    <script>
        window.onload = () => {
            //获取滚动条距离顶部的距离;
            function getScrollTop() {
                let scrollTop = document.documentElement.scrollTop;
                console.log("距离顶部的高度：" + scrollTop);
                return scrollTop;
            }

            //获取可视范围的高度
            function getClientHeight() {
                var clientHeight = 0;
                console.log(document.body.clientHeight+",,,,,,,"+document.documentElement.clientHeight);
                if (document.body.clientHeight && document.documentElement.clientHeight) {
                    clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
                } else {
                    clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
                }
                console.log("可视区域高度："+clientHeight);
                return clientHeight;
            }
            //获取文档高度
            function getScrollHeight() {
                var eleHeight;
                eleHeight=Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
                console.log("文档高度："+eleHeight);
                return eleHeight;
            }


            window.onscroll = () => {
                getScrollTop();
                getClientHeight();
                getScrollHeight();
                if(getScrollTop()+getClientHeight() == getScrollHeight()){
                    console.error("到底了");
                }
            }
        }
    </script>

    </html>

越来越好。

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
监听滚动条触底

监听滚动条触底。作为记录。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...
复制链接

扫一扫