jquery - 求大侠，$(window).height() 的值的困惑。
本文介绍了jquery - 求大侠，$(window).height() 的值的困惑。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
当元素处于底部时，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-scroll-top
| | | |
| +----------------------------------+ +
el-offset-top| | | | |
| | | | |
| | | | |
| | | | |
| win-h| | | |
| | | | |
| | | | |
+ | +----+ | |
| | |el-h | |
| | | | |
+---------+------------------------+
| |
| |
| |
| |
| |
| |
| |
| |
| |
+------------------------+
所以滚动到 win.scrollTop(element.offset().top + element.height() + 2 - win.height()) 就到了元素的底部，这个 2 是上下 border 多出来的 2px。
这篇关于jquery - 求大侠，$(window).height() 的值的困惑。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
