Prevent Body Scrolling on iOS

2.5.2023

JavaScript CSS CSS trick

ios-prevent-scroll-fix.js Raw #

const $body = document.querySelector('body');
let scrollPosition = 0;

export default {
  enable() {
    scrollPosition = window.pageYOffset;
    $body.style.overflow = 'hidden';
    $body.style.position = 'fixed';
    $body.style.top = `-${scrollPosition}px`;
    $body.style.width = '100%';
  },
  disable() {
    $body.style.removeProperty('overflow');
    $body.style.removeProperty('position');
    $body.style.removeProperty('top');
    $body.style.removeProperty('width');
    window.scrollTo(0, scrollPosition);
  }
};

css-solution.css Raw #

/* https://benfrain.com/preventing-body-scroll-for-modals-in-ios/ */

html, body, *.bg-scrolling-element-when-modal-active {
    /* when modal active */
    touch-action: none;
    -webkit-overflow-scrolling: none;
    overflow: hidden;
    /* Other browsers */
    overscroll-behavior: none;
}

best-solution-without-body-modif Raw #

// https://codepen.io/kcko/pen/WNaZWPv


<div class="js-overlay overlay">
  <button class="js-close">Close overlay</button>
  <ul>
    <li>About</li>
    <li>Contact</li>
    <li>Events</li>
    <li>About</li>
    <li>Contact</li>
        <li>About</li>
    <li>Contact</li>
    <li>Events</li>
    <li>About</li>
    <li>Contact</li>
        <li>About</li>
    <li>Contact</li>
    <li>Events</li>
    <li>About</li>
    <li>Contact</li>
        <li>About</li>
    <li>Contact</li>
    <li>Events</li>
    <li>About</li>
    <li>Contact</li>
        <li>About</li>
    <li>Contact</li>
    <li>Events</li>
    <li>About</li>
    <li>Contact</li>
        <li>About</li>
    <li>Contact</li>
    <li>Events</li>
    <li>About</li>
    <li>Contact</li>    <li>About</li>
    <li>Contact</li>
    <li>Events</li>
    <li>About</li>
    <li>Contact</li>
        <li>About</li>
    <li>Contact</li>
    <li>Events</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</div>

<div class="js-wrapper">
  <header>
    <button class="js-open">Open overlay</button>
  </header>
  <main>
    <!-- All lorem ipsum after this -->
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
    <p>Bibendum porttitor porta conubia potenti sed natoque ornare vulputate ridiculus. Senectus erat id class primis urna lorem sodales. Sociis nascetur et accumsan id aliquet? Dis vestibulum dui ligula inceptos libero eros morbi, tortor fames aliquet erat aptent. Fermentum hac augue adipiscing sollicitudin bibendum phasellus commodo mi. Posuere per felis interdum nulla sagittis turpis placerat pellentesque laoreet lorem. Condimentum aenean orci aliquet malesuada. Ligula torquent nullam, luctus laoreet. Condimentum, urna felis purus porta! Natoque neque parturient magna amet.</p>
  </main>

</div>


<style>
  * { box-sizing: border-box; }

body {
  font-family: sans-serif;
  margin: 0;
}

header {
  position: sticky;
  top: 0;
  padding: 1rem;
  background-color: rgb(255, 255, 255);
}

main {
  padding: 0 1rem;
}

.is-fixed {
  position: fixed;
  height: 100%;
  width: 100%;
  // Allow the main content to be scrolled,
  // so we can adjust the scroll position with JS.
  overflow: auto;
}

.overlay {
  display: none;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 1rem;
  color: rgb(255, 255, 255);
  overflow: auto;
  padding: 1rem;
  z-index: 1;
}

.overlay--is-open {
  display: block;
}

</style>

<script>
  
  const openBtn = document.querySelector('.js-open');
const closeBtn = document.querySelector('.js-close');
const overlay = document.querySelector('.js-overlay');
const wrapper = document.querySelector('.js-wrapper');

// Store the offset so we can restore it on close.
let scrollTop = 0;

openBtn.addEventListener('click', () => {
  scrollTop = window.scrollY;
  wrapper.classList.add('is-fixed');
  overlay.classList.add('overlay--is-open');
  // Scroll the wrapper, rather than setting an offset
  // via `top` or `transform`.
  wrapper.scroll(0, scrollTop);
});

closeBtn.addEventListener('click', () => {
  wrapper.classList.remove('is-fixed');
  overlay.classList.remove('overlay--is-open');
  window.scrollTo(0, scrollTop);
});
  
</script>