ビューポートの外にいる場合divsを "visibility：hidden"に設定するには

Question

私はモバイルWebアプリケーションを開発しています。ただし、iOS 5.1以降のSafariではメモリが限られています。私はcss3トランジションを使用するとき、メモリ使用量を最小限に抑える必要があります。私はCSSスタイル "display：none/visibility：hidden"を使用すると、メモリの問題によってアプリケーションがクラッシュしないことがわかりました。だから私は、本当に隠されているときには、 "隠された"ものにしたい。 私の英語は悪いです。絵は私がしたいかを示すことができます。

アップロードされた画像を**：**

「可視性：隠された」CSSをウェブサイトで使用されたもう一つの例時にすべてのセッションを非表示にするプロパティを画面上ではありません。

example website: Dentsu Network

Answer 1

plugin for jQuery offering viewport selectorsがあります。

すべてをvisibility:hidden;に設定して、ビューポート内の項目のみを表示することができます。ユーザーがスクロールすると、ビューポートの要素を再描画して表示することもできます。

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

Answer 2

あなたはdocument.body.scrollTopからのビューポートとウィンドウのサイズを計算することができるはずです。

スクロールトップが100ピクセルの場合、ユーザーは100ピクセル下にスクロールしました。そして、画面のトップ100pxを占めるdivを非表示にして、101pxで始まりdivのサイズを表示して、画面のサイズ（高さ）まで拡大することができます。