title: Iframes in iOS, fixed positioning and scrolling issues
body: <p>I have a base html file that holds an iFrame that is supposed to work as a "webview". This iframe should have the exact area of the mobile screen area, but as the iOS frames expand to its content, any absolut positioned content gets weird. I was able to workaround it with a (somewhat clunky) solution making the html of the frame with a fixed height, and putting the body with fixed position and overflow:auto.</p>
  
  <p>(The fixed position prevented the flicker on scroll).</p>
  
  <p>The problem is: Now anything that was on the frame listening for window.scroll() won't work anymore as, well, the window isn't scrolling anymore. :)</p>
  
  <p>I wanted to make something like this: </p>
  
  <p>Listen for the $('body').scroll event and then fake a trigger on the $(window).scroll event with the body scrollLeft/scrollTop. Is there anyway to achieve this, without actually scrolling the window (which is impossible in my scenario)?</p>
  
  <p>My test files are these:</p>
  
  <p>Base html: </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"&gt;
  &lt;/head&gt;
  &lt;style&gt;
      body {
          padding:0;
          margin:0;
      }
      iframe {
          position: relative;
          height:500px;
          border:none;
          width: 100%;
      }
  &lt;/style&gt;
  &lt;body&gt;
      &lt;iframe scrolling="no" src="teste2.html" height="500"&gt;&lt;/iframe&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the iframe:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"&gt;
  &lt;/head&gt;
  &lt;style&gt;
      html {
          overflow:auto;
          height:500px;
      }
      body {
          position:fixed;
          overflow:auto;
          -webkit-overflow-scrolling:touch;
          width:100vw;
          height:500px;
          padding:0;
          margin:0;    
      }
      .wrapper {
          height:2000px;
          background:green;
      }
      .footer {
          position: fixed;
          width:100%;
          bottom:0;
          left:0;
          height:50px;
          background:red;
          z-index:20;
      }
  &lt;/style&gt;
  &lt;body&gt;
     &lt;div class="wrapper"&gt;&lt;/div&gt;
     &lt;div class="footer"&gt;&lt;/div&gt;
     &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
     &lt;script&gt;
          $('document').ready(function(){
              $('.wrapper').css('background','blue');
  
          });
  
          $(window).scroll(function(){
              console.log($(window).scrollTop());
              if ($(window).scrollTop() &gt; 200) { 
                  $('.wrapper').css('background','yellow');
              }
          });     
     &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks a lot for any help. If you need anymore information, please help me describe the issue a little better.</p>