如何將div設置爲「visibility：hidden」，如果它們在視口外

我正在開發移動web應用程序。但是，iOS 5.1或更低版本的Safari瀏覽器內存有限。當我使用css3轉換時，我需要最小化內存使用情況。我發現如果我使用CSS樣式「display：none/visibility：hidden」，應用程序不會因內存問題而崩潰。所以我想在真正隱藏的時候讓它「隱藏」。我的英語不好。畫面可以顯示我想要什麼：如何將div設置爲「visibility：hidden」，如果它們在視口外

上傳圖像**：**

picture outlay

另一個例子是一個網站使用的CSS「可見性：隱藏」屬性，當它隱藏每個會話是不是在屏幕上：

example website: Dentsu Network

來源

2012-09-23 Chris So

「只有在屏幕上」的含義是什麼？ –

是的，我也想知道...我不太明白這個問題......也許他想使用媒體查詢屏幕唯一的規則？ – rafaelbiten

很可能他希望在用戶滾動時一點一點地顯示頁面。類似於他們在Mashable上的做法。 –

有plugin for jQuery offering viewport selectors。

您可以將所有內容設置爲visibility:hidden;，然後僅顯示視口中的項目。一旦用戶滾動，您可以重新抓取視口元素並顯示它們。

$(":in-viewport").css("visibility", "visible")

來源

2012-09-23 15:41:02

你應該能夠計算從document.body.scrollTop視口和窗口的大小。

說出如果scrollTop是100px，則用戶向下滾動100px。現在，您可能需要隱藏佔據屏幕前100像素的div，並顯示一個以101px開頭的div，並延伸至屏幕的大小（高度）

來源

2012-09-23 15:38:46

感謝您的回答，但是我們是否需要通過頂部大於100px的所有div？ –

您是否找到實際有效的解決方案？只有我看到卸載的內存管理目的可能是Flickr。有時您會看到圖像轉爲灰色塊，並且如果快速向上滾動，則會從緩存再次加載。 – Firsh

在第二張紙上，他們正在使用你所描述的。我們應該向他們學習:) – Firsh

如何將div設置爲「visibility：hidden」，如果它們在視口外

回答

相關問題