2 doyoucnm doyoucnm 于 2016.02.18 23:19 提问

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个回答

showbo
showbo   Ds   Rxr 2016.02.19 10: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>
devmiao
devmiao   Ds   Rxr 2016.02.18 23:25
enpterexpress
enpterexpress (。)(。)大神好厉害
接近 2 年之前 回复
caozhy
caozhy   Ds   Rxr 2016.02.19 09:10
 $(window).scroll(function(){
  var scrollTop = $(this).scrollTop();
  var scrollHeight = $(document).height();
  var windowHeight = $(this).height();
  if(scrollTop + windowHeight == scrollHeight){
    alert("you are in the bottom");
  }
});
scrollHeight用$(document).height();看看
qq_19558705
qq_19558705 厉害,奇怪的是有距顶部方法,为什么没有距底部的?
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!