如果 div 在视口之外，我如何将它们设置为“可见性：隐藏”答案

【问题标题】：how can i set divs to "visibility:hidden" if they are outside of viewport如果 div 在视口之外，我如何将它们设置为“可见性：隐藏”
【发布时间】：2012-09-15 05:36:41
【问题描述】：

我正在开发移动网络应用程序。但是，iOS 5.1 或更低版本中的 safari 内存有限。当我使用 css3 转换时，我需要最小化内存使用量。我发现如果我使用 css 样式“显示：无/可见性：隐藏”，应用程序不会因内存问题而崩溃。因此，当它们真正隐藏时，我想将它们“隐藏”。我的英语不好。图片可以显示我想要的：

上传的图片**：**

另一个例子是网站使用 css “visibility: hidden” 属性来隐藏不在屏幕上的每个会话：

example website: Dentsu Network

【问题讨论】：

“只有在屏幕上”是什么意思？？？
是的，我也想知道...我不太明白这个问题...也许他想使用媒体查询仅屏幕规则？
他很可能希望在用户滚动时一点一点地显示页面。类似于他们在 Mashable 上的做法。
你可能想看看appelsiini.net/projects/lazyload - 这用于图像，但类似的原则也可以应用于其他元素。
我的意思是当用户（屏幕外）看不到它们时，我想隐藏（可见性：隐藏）div。我尝试循环所有的 div 并测试它们是否不在屏幕中，对于每个触摸事件。但是，它没有效果。

标签： javascript jquery ios css web

【解决方案1】：

有一个plugin for jQuery offering viewport selectors。

您可以将所有内容设置为visibility:hidden;，然后仅在视口中显示项目。用户滚动后，您可以重新抓取视口元素并显示它们。

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

【讨论】：

【解决方案2】：

您应该能够根据document.body.scrollTop 计算视口和窗口大小。

如果 scrollTop 是 100px，则用户向下滚动了 100px。现在你可能想要隐藏一个占据屏幕顶部 100px 的 div 并显示一个从 101px 开始并延伸到屏幕大小（高度）的 div

【讨论】：

感谢您的回答，但是我们是否需要遍历所有顶部大于 100px 的 div？
你找到真正有效的解决方案了吗？我看到的唯一可能出于内存管理目的而卸载的地方是 Flickr。有时，如果您快速向上滚动，您会看到图像变成灰色块并再次从缓存中加载。
第二点，他们使用的正是您所描述的。我们应该向他们学习:)