[SalesForce] Sticky header (position:fixed) on VF page inside Salesforce1 application running on iOS

I have a Visualforce page running inside a Salesforce1 page. The page contains a sticky header (position: fixed, etc.). This works great everywhere except on iOS. If I render the page directly in Safari on the phone (iOS) the sticky header works as expected, but when I view the page inside Salesforce1 the sticky header stops working. It just scrolls with the rest of the page.

I believe it has to do with the page being rendered in an iFrame inside Salesforce1. Similar to this issue: https://stackoverflow.com/questions/27083740/why-does-positionfixed-not-work-when-viewed-in-an-iframe-using-an-iphone-or. The fixes I have seen are to set the height and width of the iFrame to 100%. But being inside Salesforce1 that can't be done. Right?

Has anyone encountered and/or solved this issue?

Best Answer

Influenced by this Stackoverflow answer I wrapped all my Visualforce page content inside a <div id="ScrolledArea"></div> and added the following CSS to the page:

#ScrolledArea {
    height: 1px;
    min-height: 100vh; /* Percent of viewport height */
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; /* Allow momentum scrolling */
}
Related Topic