使用 jquery 获取元素的可见高度而不是其实际高度

Posted 2023-03-06

【中文标题】使用 jquery 获取元素的可见高度而不是其实际高度

【英文标题】：Get visible height of an element instead of its actual height with jquery

【发布时间】：2012-12-17 01:26:09

【问题描述】：

这篇文章与this one相关。 请考虑阅读它。 :-)

在我链接到的帖子中，我认为如果一个 div 的可见高度大于另一个 div 的可见高度，则我的问题的解决方案是更改链接的目标。在我的布局中，我所指的所有 div 的高度均为 1100 像素。但这不是我想要得到的。我希望脚本获取当前对访问者可见的 div 的高度，而不是它的实际高度。有没有办法使用jQuery来做到这一点？

提前致谢！

【问题讨论】：

你试过什么？检查函数jQuery.offset()，以及视口信息和元素高度将帮助您弄清楚。只是加减法的问题。

你有没有想过这个问题？我正在尝试做同样的事情，但我没有运气。

【参考方案1】：

您可以做的是将元素位置放在其父容器的顶部，然后从父容器高度减去它。这将为您提供元素的可见高度。

$('#container').height() - $('#overflow').position().top

这是一个fiddle 显示这个。

【讨论】：

我以前从未使用过 .offset，所以首先感谢您的回答，它教会了我一些东西。 :-) 我试图用你的方法想出一些东西，但不幸的是它没有用。假设我有 3 个 1100 像素高的 div。因此，我的整个文档高 3300 像素。我想要做的是计算最后一个 div 的顶部和文档顶部之间的距离，然后根据结果更改我的链接的目标。所以：alert(3300 - $('#div3').offset().top)

当我在文档顶部时，它返回了 1100，这是我所期望的。但后来我向下滚动一点，启动脚本，但它仍然返回 1100。我以为它会给我一个高于 1100 的数字，但它没有。所以我想 .offset 并没有完全按照我的想法做，它只是不适应滚动的当前位置。 :-/

@TomS。将$(window).scrollTop() 添加到您的警报中，它会为您提供您想要的。 fiddle

太棒了！再说一次，我不知道你能做到这一点。现在我想我可以使用它来适当地调整链接。非常感谢！ :-)

【参考方案2】：

用另一个 DIV 包装视口 DIV 的内容。以该 DIV 为目标以读取所有内容的高度，如下所示：

JQuery: $('div#contents').height();

布局：

<div id="viewport">
  <div id="contents">...all your div contents...</div>
</div>

希望这会有所帮助。祝你好运。

【参考方案3】：

您必须使用固定的 1100 像素高度吗？因为你也可以指定一个 max-height:1100px;和高度：100%； 根据您要放入 div 的内容，您当然可以通过

获取当前高度

$('.divclass').height();