Mobile-safe vertical scrolling and horizontal overflow protection

<div class="container">
  <div class="row gy-5 gx-4 gx-lg-5">
    <!-- Columns -->
  </div>
</div>

<style>
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-y: none;
  }

  body {
    position: relative;
  }

  img,
  video,
  iframe,
  canvas,
  svg {
    max-width: 100%;
  }
</style>

let touchStartY = 0;

document.addEventListener(
  'touchstart',
  event => {
    if (event.touches.length !== 1) return;

    touchStartY = event.touches[0].clientY;
  },
  { passive: true }
);

document.addEventListener(
  'touchmove',
  event => {
    if (event.touches.length !== 1) return;

    const currentY = event.touches[0].clientY;
    const pullingDown = currentY > touchStartY;

    if (window.scrollY <= 0 && pullingDown) {
      event.preventDefault();
    }
  },
  { passive: false }
);