滚动条滚动到底部的判断

芋圆社区 > 编程 > JavaScript > 滚动条滚动到底部的判断

654

2022-12-05

Hey、小怪兽

JavaScript

• 完整代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            div {
                width: 100px;
                height: 500px;
                background-color: grey;
            }
        </style>
    </head>
    <body>
        <div>123</div>
        <div>123</div>
        <div>123</div>

        <script>
            // 滚动条在Y轴上的滚动距离
            function getScrollTop() {
                var scrollTop = 0,
                    bodyScrollTop = 0,
                    documentScrollTop = 0;

                if (document.body) {
                    bodyScrollTop = document.body.scrollTop;
                }
                if (document.documentElement) {
                    documentScrollTop = document.documentElement.scrollTop;
                }
                scrollTop = bodyScrollTop - documentScrollTop > 0 ? bodyScrollTop : documentScrollTop;
                return scrollTop;
            }
            // 文档的总高度
            function getScrollHeight() {
                var scrollHeight = 0,
                    bodyScrollHeight = 0,
                    documentScrollHeight = 0;
                if (document.body) {
                    bodyScrollHeight = document.body.scrollHeight;
                }
                if (document.documentElement) {
                    documentScrollHeight = document.documentElement.scrollHeight;
                }
                scrollHeight = bodyScrollHeight - documentScrollHeight > 0 ? bodyScrollHeight : documentScrollHeight;
                return scrollHeight;
            }
            // 浏览器视口的高度
            function getWindowHeight() {
                var windowHeight = 0;
                if (document.compatMode == "CSS1Compat") {
                    windowHeight = document.documentElement.clientHeight;
                } else {
                    windowHeight = document.body.clientHeight;
                }
                return windowHeight;
            }

            window.onscroll = function () {
                if (getScrollTop() + getWindowHeight() == getScrollHeight()) {
                    alert("到底部了！");
                }
            };
        </script>
    </body>
</html>

jQuery

• 完整代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            div {
                width: 100px;
                height: 500px;
                background-color: grey;
            }
        </style>
    </head>
    <body>
        <div>123</div>
        <div>123</div>
        <div>123</div>

        <!-- 自己的jquery文件 -->
        <script src="./jquery-3.5.1.min.js"></script>
        <script>
            $(window).scroll(function () {
                let winH = $(window).height();
                let wsT = $(window).scrollTop();
                let docH = $(document).height();

                if (winH + wsT == docH) {
                    alert("到底部啦！");
                }
            });
        </script>
    </body>
</html>

上一篇：AES加密 CBC模式

下一篇：console.log展开值不一样

滚动条滚动到底部的判断

JavaScript

jQuery

回复