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

rand

2k35120134

发布于
2016-07-18

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

javascript

阅读 11.1k

3 个回答

得票最新

Tomoe

6.2k11012

发布于
2016-07-18

✓ 已被采纳

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

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

应该是这个吧:
element.scrollHeight - element.scrollTop-element.clientHeight

码中仙

10314

发布于
2016-12-03

<!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>
        <div id="main"></div>
    </body>

</html>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

git提交记录问题？

怎么获取动态弹出对话框的模拟单击？

什么是闭包？闭包有哪些应用场景？

求一个能输入需求就可以写出代码的网站，支持一键部署？