2

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

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

有时列表中的一半项目与包含的元素边界重叠，我希望通过 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>
4

3 回答 3

0

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

于 2012-05-29T15:51:58.270 回答
0

我认为容器的 offsetHeight 给了你它的真实高度，所以你可以比较每行的 offsetTop+offsetHeight，最后在必要时隐藏它。只是一个想法......也许需要根据行有多少父容器进行一些调整。

于 2012-05-29T15:52:57.263 回答
0

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

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

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

于 2012-05-29T16:24:33.137 回答