title: Single page webapp screen transitions with maintaining the scroll position
body: <p>I'm build a single page web application for mobile phones. The application should implement transitions between "screens" (like any other mobile app e.g. Facebook, Twitter) and these transitions should be animated (slide left-right). Each screen has to preserve its scroll position between transitions.</p>
  
  <p>One obvious solution that comes in mind is this:</p>
  
  <pre><code>Viewport
  +----------+ 
  |+--------+| +--------+ +--------+ +--------+
  || DIV1   || | DIV2   | | DIV3   | | DIV4   |
  ||        || |        | |        | |        |
  ||        || |        | |        | |        |
  ||        || |        | |        | |        |
  ||        || |        | |        | |        |
  |+--------+| +--------+ +--------+ +--------+
  +----------+
  </code></pre>
  
  <p>The different screens are put into containers (DIV1, DIV2, ...) which are styled to fit the screen (<code>position: absolute; width: 100%; height: 100%; top: 0</code>) and have <code>overflow-x: scroll</code>. The containers are positioned next to each other and the transition is as easy as animating their <code>left</code> property.</p>
  
  <p>Easy so far.</p>
  
  <p>The problem is the following: in this implementation the address bar doesn't disappear in the mobile browser when the user scrolls down.</p>
  
  <p>I'm talking about this feature:
  <img src="https://i.stack.imgur.com/hpiFp.gif" alt="enter image description here"></p>
  
  <p>It's because mobile browsers do this only if the user scrolls the <code>body</code> - not a container in the <code>body</code>. There are <a href="https://stackoverflow.com/questions/24480571/is-it-possible-to-programmatically-show-url-bar-in-chrome-for-android">several</a> <a href="https://stackoverflow.com/questions/9678194/cross-platform-method-for-removing-the-address-bar-in-a-mobile-web-app">suggestions</a> for solution but they don't work in all targeted platforms (Android Chrome and native browser, iPhone Safari) and are quite hacky. I'd like to preserve the original behavior of the browser as it is.</p>
  
  <p>For that reason - apparently - need to leave the scrolling on the body. This means that containers have to be "full-length" (and not overflow-scroll), still positioned next to each other. This is where transitions become difficult if you think about it.</p>
  
  <p>My current solution has the following steps when transitioning from DIV1 to DIV2:</p>
  
  <ol>
  <li>position <code>top</code> of DIV2 to the current <code>scrollTop</code> of the window</li>
  <li>animate DIV1's and DIV2's <code>left</code> property so that DIV2 fills the screen</li>
  <li>move DIV2's <code>top</code> to <code>0</code> once the animation has finished so that the user can't scroll back further than the top of this screen</li>
  <li>Move the window's scrollTop to 0</li>
  <li>Hide DIV1 (in case it's longer than DIV2)</li>
  </ol>
  
  <p>Transitioning back to DIV1 is similar, in reverse. This actually works quite nice (although it's insanely complex and uses transition event listeners) but unfortunately there's a really ugly flickering effect between step 3 and 4 under iOS Safari because it renders the page right after step 3 without waiting for step 4.</p>
  
  <p>I am looking for a framework-independent (<a href="http://vanilla-js.com/" rel="nofollow noreferrer">vanilla JS</a>) solution.</p>