js如何判断浏览器滚动条滚动到了底部?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

小旋风柴进 2016-06-01 11:17:57 1953
<!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)也不可能有那么高,
看得我一愣一愣的完全不明白了。

JavaScript
分享到
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:22:57

    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>
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程