javascript - 你是如何用js获取div的滚动条与底部之间距离的？-PHP中文网问答

javascript - 你是如何用js获取div的滚动条与底部之间距离的？

黄舟 2017-04-11 11:38:55

[JavaScript讨论组]

391

如题，想听一下不同的思路

黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

全部回复(2)

ringa_lee2017-04-11 11:40:55 2楼

element.scrollTop 代表目前滾動條和最上方距離多長
element.scrollHeight 代表整個滾動條多長

element.scrollHeight - element.scrollTop 就是滾動條與底部距離

赞 +0

添加回复

PHP中文网2017-04-11 11:40:55 1楼

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <script src="js/jquery-3.1.1.js"></script>
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
            }
            #main {
                width: 100%;
                height: 2000px;
                background: pink;
            }
        </style>
        <script type="text/javascript">
            $(window).scroll(function() {　　
                var scrollTop = $(this).scrollTop();　　
                var docHeight = $(document).height();　　
                var windowHeight = $(this).height();
                var scrollHeight=document.body.scrollHeight;
                console.log("scrollTop:"+scrollTop);
                console.log("scrollbottom:"+(docHeight-scrollTop-windowHeight));
                if(scrollTop + windowHeight == docHeight) {　　　　
                    alert("已经到最底部了！");　　
                }
            });
        </script>
    </head>

    <body>
        <p id="main"></p>
    </body>

</html>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>