极客观点
项目管理
HarmonyOS
当元素处于底部时，element.offset().top + element.height()为600px，而win.height() + win.scrollTop()为610px；为什么win.height() + win.scrollTop()不为600px呢？
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin: 0;padding: 0;}
</style>
<script src="js/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var element = $('.element');
var win = $(window);
$('.element').text( element.offset().top + element.height());
$('.element2').text( win.height() + win.scrollTop());
win.scroll(function () {
$('.element').text( element.offset().top + element.height());
$('.element2').text( win.height() + win.scrollTop());
});
})
</script>
</head>
<body style="height: 2000px;position: relative">
<div class="element" style="height: 100px;width:100px; border:1px solid;margin-top:500px;display: inline-block;"></div>
<div class="element2" style="height: 100px;width:100px; border:1px solid;margin-top:500px;display: inline-block;"></div>
</body>
</html>
这两个这么比较是无意义的。
之所以会让你产生需要相等的误解是因为视口高度的巧合。
scrollTop只是滚动条的高度。可以这么想象，一张纸（文档）长 1000px ，但一个方框（视口）高度只有 200px ，所以只能通过上下移动这个方框来一次看一部分文档。
scrollTop就是这个方框与纸张顶部的距离。offsetTop则是这个元素与纸张顶部的距离。所以如果想要滚动到元素底部的话，画个图就很清晰了
所以滚动到
win.scrollTop(element.offset().top + element.height() + 2 - win.height())就到了元素的底部，这个2是上下 border 多出来的 2px。