如何更改不在屏幕上的元素的 CSS 可见性样式？答案

【问题标题】：How can I change the CSS visibility style for elements that are not on the screen?如何更改不在屏幕上的元素的 CSS 可见性样式？
【发布时间】：2010-05-04 21:36:35
【问题描述】：

我有很多数据被放入具有overflow: auto 样式的<DIV>。 Firefox 可以优雅地处理这个问题，但 IE 在滚动 div 和在页面上执行任何 Javascript 时都会变得非常缓慢。

起初我认为 IE 无法处理其 DOM 中的那么多数据，但后来我做了一个简单的测试，我将 visibility: hidden 样式应用于前 100 个元素之后的每个元素。它们仍然占用空间并导致要出现的滚动条。当我这样做时，IE 不再有数据问题。

所以，我想要一个“智能”div，它隐藏所有当前在屏幕上不可见的嵌套 div 元素。是否有一个简单的解决方案，或者我需要一个无限循环来计算滚动条的位置？如果没有，是否有一个特定的事件可以让我参与其中我可以做到这一点？是否有 jQuery 选择器或插件可以让我选择当前在屏幕上不可见的所有元素？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您想使用display: none 而不是visibility: hidden

使用可见性隐藏的元素： hidden 仍会在视口中占用它们的空间。

就使用“智能”div 而言，正如您所描述的那样。您可能对jQuery autopager plugin 之类的内容感兴趣。

【讨论】：

自动分页器插件看起来很有趣......不幸的是，我没有时间尝试不同的想法来安抚 IE，所以我只是删除了页面上的大部分功能。

【解决方案2】：

我能够实现我的问题中的目标，但它并没有在 IE 中带来太多的性能提升。我重新编写了整个页面，但这是未完成的代码，以防其他人想做这样的事情并想知道从哪里开始：

//其中 'child' = 具有overflow: auto 样式的div ('parent') 内的元素

function isChildOnScreen(child, parent) { 
  var topOfChild = child.offsetTop;
  var bottomOfChild = child.offsetTop + child.offsetHeight;
  var topOfParent = parent.scrollTop;
  var bottomOfParent = parent.scrollTop + parent.offsetHeight;

  var makeVisible = (topOfChild >= topOfParent && topOfChild <= bottomOfParent)
    ||
    (bottomOfChild >= topOfParent && bottomOfChild <= bottomOfParent)
    ||
    (topOfChild < topOfParent && bottomOfChild > bottomOfParent);

  return makeVisible;
}

【讨论】：