晴明qm 2016-02-18 15:19 采纳率: 13.3%
浏览 2204
已采纳

js如何判断浏览器滚动条滚动到了底部?

 <!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width, user-scalable=no">
    </head>

    <body>

        <div id="part1" style="height:2000px;overflow: auto;background: lightblue;">
        </div>
                <div id="part2" style="height:3000px;overflow: auto;background:lightcoral;">
        </div>
        <script>
            console.info(document.body.scrollHeight);
            console.info(document.body.clientHeight);
            console.info(document.body.offsetHeight);

            var d = document.getElementById("part1").offsetHeight;
            console.info(d);

            window.addEventListener("scroll", function(event) {
                var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                console.log(scrollTop);            
            });
        </script>
    </body>

</html>

写了这个简单的demo测试。
我想通过 scrollTop 与 scrollHeight 比对来判断是否滚动到底部，但是发现当滚到 part1底部的时候 scrollTop 是1700多，part1的高度为2000px。
当滚到 part2底部的时候 scrollTop 是4300多，part2的高度为3000px，总体body的高度应该为5000px。
这里面的 200多 和 600多 都是被什么给占了。。。
要说滚动条（scrollbar）也不可能有那么高，
看得我一愣一愣的完全不明白了。

  • 写回答

3条回答 默认 最新

  • Go 旅城通票 2016-02-19 02:30
    关注

    CSS1Compat获取可是高度是document.documentElement，不是document.body

     <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, user-scalable=no">
</head>

<body>

    <div id="part1" style="height:2000px;overflow: auto;background: lightblue;">
    </div>
    <div id="part2" style="height:3000px;overflow: auto;background:lightcoral;">
    </div>
    <script>
        var viewHeight = document[document.compatMode == 'CSS1Compat'?'documentElement':'body'].clientHeight;
        var scrollHeight = document.body.scrollHeight;
        var timer;
        window.addEventListener("scroll", function (event) {
            var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
            timer = clearTimeout(timer);
            if (scrollTop + viewHeight >= scrollHeight)console.log('at Bottom');
        });
    </script>
</body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？