编程隐藏不完整的元素

Question

有没有办法可以隐藏页面边框不完全可见的所有元素。

我有表行列表，其中包含元素具有动态高度，但隐藏了溢出。

有时列表中一半项目与包含元素边界重叠，我希望通过CSS或JavaScript可以隐藏这些内容。

希望图像可以更好地解释这一点。在这里，我想隐藏框24.

我的一个想法是迭代所有元素，找到它的边界，并检查它们是否与容器边界重叠。这似乎是一个非常重量级和混乱的方式（特别是因为这是一个滚动列表，我必须每秒计算一次）。有没有更好的办法？

谢谢，如果我需要澄清什么，请告诉我？

更新

我希望这是通用的并使用不同的标记结构，但是对于我正在使用的代码的一个简单示例（在这种情况下，我猜只会显示第一个）：

<style>
  #parent {height: 100px; overflow: hidden; }
  .child {height: 75px;}
</style>

<div id='parent'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>

Answer 1

您可以计算top offset + height并检查结果值是否大于容器高度。如果是，则该元素和其后的其余项目超出容器的范围。

Answer 2

我认为容器的offsetHeight为你提供了真正的高度，因此可以与每行的offsetTop + offsetHeight进行比较，最后在必要时隐藏它。只是一个想法......根据行的父容器数量，可能需要进行一些调整。

Answer 3

在http://jsfiddle.net/VhShD/中与document.elementFromPoint玩了一会后，我认为这不是一个好主意。

更好的方法是将滚动限制为某些增量，这样无论何时滚动它都会最小化滚动，因此至少会显示或隐藏至少1个新项目。这至少在WinAmp播放列表中使用。

不幸的是scroll事件很糟糕，它不包含用户想要滚动的任何信息或阻止滚动发生的能力。您必须使用完全自定义的滚动解决方案，如jScrollPane。