我需要检索可滚动区域内div的可见高度。我认为自己使用jQuery相当不错,但这完全让我失望。
假设我在黑色包装纸中有一个红色div:
在上图中,jQuery函数将返回248,即div的可见部分。
如上图所示,一旦用户滚动经过div的顶部,它将报告296。
现在,一旦用户滚动经过div,它将再次报告248。
显然,我的数字不会像本演示中的那样一致和清晰,或者我只是硬编码这些数字。
我有一些理论:
- 获取窗口的高度
- 获取div的高度
- 获取div从窗口顶部的初始偏移量
- 在用户滚动时获取偏移量。
- 如果偏移量为正,则表示div的顶部仍然可见。
- 如果为负,则div的顶部已被窗口遮盖。此时,div可能占据了窗口的整个高度,或者div的底部可能正在显示
- 如果显示div的底部,请找出它与窗口底部之间的间隙。
看起来很简单,但是我无法绕开它。明天早上我还要再做一次。我只是认为你们中的一些天才也许可以提供帮助。
谢谢!
更新:我自己搞定了,但是下面的答案之一看起来更优雅,所以我将使用它。出于好奇,我想出了以下几点:
$(document).ready(function() {
var windowHeight = $(window).height();
var overviewHeight = $("#overview").height();
var overviewStaticTop = $("#overview").offset().top;
var overviewScrollTop = overviewStaticTop - $(window).scrollTop();
var overviewStaticBottom = overviewStaticTop + $("#overview").height();
var overviewScrollBottom = windowHeight - (overviewStaticBottom - $(window).scrollTop());
var visibleArea;
if ((overviewHeight + overviewScrollTop) < windowHeight) {
// alert("bottom is showing!");
visibleArea = windowHeight - overviewScrollBottom;
// alert(visibleArea);
} else {
if (overviewScrollTop < 0) {
// alert("is full height");
visibleArea = windowHeight;
// alert(visibleArea);
} else {
// alert("top is showing");
visibleArea = windowHeight - overviewScrollTop;
// alert(visibleArea);
}
}
});