This question needs some explanation, so please bear with me.
Contrary to popular belief, inertial scrolling (very smooth scrolling of 60 frames per second) is not enabled on Web pages in Mobile Safari by default. Since this makes a world of difference in user experience, I turned it on by dynamically applying this CSS to the HTML element and BODY of the page, after the Modernizr test for iOS:
<style> .touchscroll { overflow: auto; -webkit-overflow-scrolling: touch; position:relative; height:100%; } .touchscroll body { height:100%; overflow: auto; -webkit-overflow-scrolling: touch; position:relative; } </style>
The above basically makes the body element a scrollable element and with -webkit-overflow-scrolling: touch, everyone gets a smooth intertia scroll effect throughout the page. More details about this decision can be found here ( disclaimer : article separately).
It works so far, so good. The problem is that this solution effectively disables yet another very desirable behavior of Mobile Safari: usually when scrolling down it decreases the address bar and completely hides the bottom panel of the browser. They reappear when scrolling back.
Unfortunately, the above method somehow disables this. Yes, we have super smooth scrolling, but the browser panel is always large, and the bottom panel is always visible, both occupy valuable space.
So my question is, can I have both? I want super smooth scrolling throughout the page, but I also want the default behavior of browser elements to scroll when hidden.
Example site where I use this: http://www.jungledragon.com/
If you open it in Mobile Safari, you will see a smooth scrolling, but not hiding browser elements when scrolling down.