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）也不可能有那么高，
看得我一愣一愣的完全不明白了。
展开
收起
1
条回答
写回答
写回答
-
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>2019-07-17 19:22:57赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
