title: Javascript touch event not working in Mobile Safari
body: <p>I am trying to restrict user to scroll if they touch on an iframe. So, if they touch on body, they can scroll. </p>
  
  <p>Wondering why below code works fine in Mobile Chrome, but not working in Mobile Safari. Any way to fix this for safari? </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"&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt; 
          &lt;style&gt;
              .overflowHidden {
                  position:relative;
                  overflow-y:hidden;
              }
              .overflowAuto {
                  -webkit-overflow-scrolling: touch;
                  overflow: auto;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;section&gt;
              &lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;
              &lt;iframe id="appSimulator" style="background: #000000;" width="189px" height="400px" frameborder="0" scrolling="no"&gt;&lt;/iframe&gt;
              &lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;
          &lt;/section&gt;
          &lt;script type="text/javascript"&gt;
              document.body.addEventListener('touchstart', function(){
                  document.body.style.overflow="auto";
                  $('body').removeClass('overflowHidden');
                  $('body').addClass('overflowAuto');
              }, false)
              document.body.addEventListener('touchend', function(){
                  document.body.style.overflow="hidden";
                  $('body').removeClass('overflowAuto');
                  $('body').addClass('overflowHidden');
              }, false)
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>EDIT </p>
  
  <p>Example for Mobile Chrome - This is what I want in Safari mobile</p>
  
  <p><a href="https://i.stack.imgur.com/5GrRJ.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/5GrRJ.gif" alt="enter image description here"></a></p>
  
  <p>Thanks.</p>
  
  <p>EDIT 2</p>
  
  <p>Thank you for the help from muecas.</p>
  
  <p>Here is the current result from Safari Mobile</p>
  
  <p><a href="https://i.stack.imgur.com/76sqA.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/76sqA.gif" alt="enter image description here"></a></p>
  
  <p>Current Code</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"&gt;
          &lt;style&gt;
              body {
                  -webkit-overflow-scrolling: touch;
              }
              .iframeContainer, iframe {
                  width: 189px;
                  height: 405px;
              }
              .iframeContainer {
                  overflow: auto;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;section&gt;
              &lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;
              &lt;div class="iframeContainer"&gt;
                  &lt;iframe id="appSimulator" src="https://appetize.io/embed/keyyyyyyy?device=iphone5s&amp;scale=50&amp;autoplay=false&amp;orientation=portrait&amp;deviceColor=black&amp;language=zh-Hant" frameborder="0" scrolling="no"&gt;&lt;/iframe&gt;
              &lt;/div&gt;
              &lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;&lt;p&gt;hello&lt;/p&gt;
          &lt;/section&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>if I set <code>.iframeContainer { overflow: hidden; }</code></p>
  
  <p><a href="https://i.stack.imgur.com/x9F8J.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/x9F8J.gif" alt="enter image description here"></a></p>