title: iOS - css/js - Overlay scroll but prevent body scroll
body: <p>I know there have been a few questions similar to this but they either don't work for my use case or the accepted answers have a flaw that doesn't work for me. So...</p>
  
  <p>I have a page with a list of elements. Clicking on an element in the list will open an overlay with details about that element. I need that overlay to be scrollable but I don't want the rest of the page under the overlay to scroll so that once the overlay is closed you are in the same position (also the overlay is slightly transparent so it is annoying to the user to see the page scrolling below, also why I can't save the scrollY and reset on close).</p>
  
  <p>Right now I have the working everywhere except iOS. This is basically what I have:</p>
  
  <pre><code>&lt;html&gt;
     &lt;body&gt;
        &lt;ul id="list"&gt;
           &lt;li&gt;something 1&lt;/li&gt;
           &lt;li&gt;something 2&lt;/li&gt;
           &lt;li&gt;something 3&lt;/li&gt;
           &lt;li&gt;something 4&lt;/li&gt;
           &lt;li&gt;something 5&lt;/li&gt;
        &lt;/ul&gt;
        &lt;div id="overlay"&gt;&lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body.hidden {
     overflow: hidden;
  }
  #overlay {
     opacity: 0;
     top: -100vh;
  }
  #overlay.open {
     opacity: 1;
     overflow-y: scroll;
     overflow-x: hidden;
     top: 0;
  }
  </code></pre>
  
  <p>Then in my click hander I toggle the <code>hidden</code> class on <code>body</code>, the <code>open</code> class on <code>#overlay</code>, and populate the <code>#overlay</code> element with my content. Like I said this works fine everywhere except for iOS.</p>
  
  <p>Solutions I have seen other places say I need to use <code>position:fixed</code> and <code>height:100%</code> on the <code>body</code> and/or <code>html</code> tags. The problem with this solution is that you lose your scroll position and when you close the overlay you're back at the top of the page. Some of these lists can be really long so that isn't an option for me.</p>
  
  <p>I can't prevent scrolling completely with <code>preventDefault</code> on body or something because I need the overlay content to be scrollable.</p>
  
  <p>Any other suggestions?</p>