title: iOS 10 Safari: Prevent scrolling behind a fixed overlay and maintain scroll position
body: <p>I'm not able to prevent the main body content from scrolling while a fixed position overlay is showing. Similar questions have been asked many times, but all of the techniques that previously worked do not seem to work on Safari in iOS 10. This seems like a recent issue.</p>
  
  <p>Some notes:</p>
  
  <ul>
  <li>I can disable scrolling if I set both <code>html</code> and <code>body</code> to <code>overflow: hidden</code>, however that makes the body content scroll to the top.</li>
  <li>If the content in the overlay is long enough so that it can be scrolled, scrolling is correctly disabled for the main page content. If the content in the overlay is not long enough to cause scrolling, you can scroll the main page content.</li>
  <li>I included a javascript function from <a href="https://blog.christoffer.online/2015-06-10-six-things-i-learnt-about-ios-rubberband-overflow-scrolling/" rel="noreferrer">https://blog.christoffer.online/2015-06-10-six-things-i-learnt-about-ios-rubberband-overflow-scrolling/</a> that disables <code>touchmove</code> while the overlay is showing. This worked previously, but no longer works.</li>
  </ul>
  
  <p>Here's the full HTML source:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;style type="text/css"&gt;
          html, body {
              width: 100%;
              height: 100%;
              margin: 0;
              padding: 0;
          }
          body {
              font-family: arial;
          }
          #overlay {
              display: none;
              position: fixed;
              z-index: 9999;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
              overflow: scroll;
              color: #fff;
              background: rgba(0, 0, 0, 0.5);
          }
          #overlay span {
              position: absolute;
              display: block;
              right: 10px;
              top: 10px;
              font-weight: bold;
              font-size: 44px;
              cursor: pointer;
          }
          #overlay p {
              display: block;
              padding: 100px;
              font-size: 36px;
          }
          #page {
              width: 100%;
              height: 100%;
          }
          a {
              font-weight: bold;
              color: blue;
          }
      &lt;/style&gt;
      &lt;script&gt;
          $(function() {
              $('a').click(function(e) {
                  e.preventDefault();
                  $('body').css('overflow', 'hidden');
                  $('#page').addClass('disable-scrolling'); // for touchmove technique below
  
                  $('#overlay').fadeIn();
              });
              $('#overlay span').click(function() {
                  $('body').css('overflow', 'auto');
                  $('#page').removeClass('disable-scrolling'); // for touchmove technique below
  
                  $('#overlay').fadeOut();
              });
          });
  
          /* Technique from http://blog.christoffer.me/six-things-i-learnt-about-ios-safaris-rubber-band-scrolling/ */
          document.ontouchmove = function ( event ) {
              var isTouchMoveAllowed = true, target = event.target;
              while ( target !== null ) {
                  if ( target.classList &amp;&amp; target.classList.contains( 'disable-scrolling' ) ) {
                      isTouchMoveAllowed = false;
                      break;
                  }
                  target = target.parentNode;
              }
              if ( !isTouchMoveAllowed ) {
                  event.preventDefault();
              }
          };
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="overlay"&gt;
          &lt;span&gt;&amp;times;&lt;/span&gt;
          &lt;p&gt;fixed popover&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="page"&gt;
          &lt;strong&gt;this is the top&lt;/strong&gt;&lt;br&gt;
          lots of scrollable content&lt;br&gt;
          asdfasdf&lt;br&gt;
          lots of scrollable content&lt;br&gt;
          asdfasdf&lt;br&gt;
          lots of scrollable content&lt;br&gt;
          asdfasdf&lt;br&gt;
          lots of scrollable content&lt;br&gt;
          asdfasdf&lt;br&gt;
          lots of scrollable content&lt;br&gt;
          asdfasdf&lt;br&gt;
          lots of scrollable content&lt;br&gt;
          asdfasdf&lt;br&gt;
          lots of scrollable content&lt;br&gt;
          asdfasdf&lt;br&gt;
          lots of scrollable content&lt;br&gt;
          asdfasdf&lt;br&gt;
          lots of scrollable content&lt;br&gt;
          asdfasdf&lt;br&gt;
          lots of scrollable content&lt;br&gt;
          asdfasdf&lt;br&gt;
          lots of scrollable content&lt;br&gt;
          asdfasdf&lt;br&gt;
          lots of scrollable content&lt;br&gt;
          asdfasdf&lt;br&gt;
          lots of scrollable content&lt;br&gt;
          asdfasdf&lt;br&gt;
          lots of scrollable content&lt;br&gt;
          asdfasdf&lt;br&gt;
          lots of scrollable content&lt;br&gt;
          asdfasdf&lt;br&gt;
          lots of scrollable content&lt;br&gt;
          asdfasdf&lt;br&gt;
          lots of scrollable content&lt;br&gt;
          asdfasdf&lt;br&gt;
          lots of scrollable content&lt;br&gt;
          asdfasdf&lt;br&gt;
          lots of scrollable content&lt;br&gt;
          asdfasdf&lt;br&gt;
          lots of scrollable content&lt;br&gt;
          asdfasdf&lt;br&gt;
          &lt;br&gt;
          &lt;div&gt;&lt;a href="#"&gt;Show Popover&lt;/a&gt;&lt;/div&gt;
          &lt;br&gt;
          &lt;br&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>