Question

我将大量数据放入<DIV>样式overflow: auto。 Firefox处理这个优雅，但在滚动div和在页面上执行任何Javascript时，IE变得非常迟缓。

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

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

Answer 1

您想使用display: none代替visibility: hidden

使用visibility隐藏的元素：hidden仍将在视口中声明其空间。

至于使用“智能”div，正如你所描述的那样。您可能对jQuery autopager plugin等内容感兴趣。

Answer 2

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

//'child'=具有div样式的overflow: auto（'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;
}

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

2 个答案: