how can i set divs to "visibility:hidden" if they are outside of viewport

Question

I am developing mobile web app. However, safari in iOS 5.1 or below has limited memory. I need to minimize the memory usage when i use css3 transition. I found that if I use css style "display:none / visibility: hidden", The app will not crash by memory problem. So I want to make thing "hidden" when they are truly hidden. My English is bad. the picture can show what I want to:

uploaded image**:**

Another example which is a website used the css "visibility: hidden" property to hide every session when it is not on screen:

example website: Dentsu Network

Answer 1

There's a plugin for jQuery offering viewport selectors.

You can set everything to visibility:hidden; and then show only the items in the viewport. Once the user scrolls you can re-grab the viewport elements and show them too.

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