如何更改不在屏幕上的元素的CSS可見性樣式？

我有很多數據被放入一個<DIV>與overflow: auto風格。 Firefox可以很好地處理這個問題，但是當滾動div和在頁面上執行任何Javascript時，IE變得非常緩慢。如何更改不在屏幕上的元素的CSS可見性樣式？

起初我以爲IE只是無法在DOM中處理那麼多的數據，但後來我做了一個簡單的測試，其中我將visibility: hidden樣式應用於前100個元素中的每一個元素。它們仍佔用空間並導致滾動條出現。當我這樣做時，IE不再有數據問題。

所以，我想有一個「智能」div隱藏所有當前不可見的嵌套div元素。有沒有簡單的解決方案，或者我需要一個無限循環計算滾動條的位置？如果不是，是否有一個特定事件可以鎖定到我可以做到的地方？有沒有一個jQuery選擇器或插件，可以讓我選擇屏幕上當前不可見的所有元素？

來源

2010-04-29 aw crud

你想用display: none的而不是使用可見性隱藏visibility: hidden

元素：隱藏仍會主張自己的空間在視口中。

就像你描述的那樣，使用「智能」div。您可能對jQuery autopager plugin等產品感興趣。

來源

2010-04-29 21:34:46 racerror

autopager插件看起來很有趣...不幸的是我沒時間嘗試不同的想法來安撫IE，所以我只是刪除了頁面上的大部分功能。 – 2010-05-04 13:39:08

我能夠實現我的問題的目標，但它並沒有在IE中提供很大的性能提升。我重寫了整個頁面，但這裏是未完成的代碼，以防其他人想要做這樣的事情，並想知道從哪裏開始：

//其中'child'= div（'parent' overflow: auto風格

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; 
}

來源

2010-05-04 13:36:35

如何更改不在屏幕上的元素的CSS可見性樣式？

回答

相關問題