scroll snap long content

Question

I have the container set to scroll-snap-type: Mandatory, And It always snaps either to the top of the element or the top of the one below, making the middle part of the tall element impossible to scroll.

How can I fix this problem?

I tried to set height when the content was longer than a wrapper. it didn't solve my problem, especially on mobile.

let container = document.querySelector(".scroll-container");
let scrollItem = document.querySelectorAll(".scroll-item");

scrollItem.forEach((e) => {
  let outerH = e.scrollHeight;
  let innerH = e.querySelector(".item-inner").scrollHeight;

  if (outerH < innerH) {
    e.classList.add("noSnap");
    e.style.height = innerH + 60 + "px";
  }
});

.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.scroll-item {
  height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
}
.scroll-item:not(:last-child) {
  margin-bottom: 100px;
}

.scroll-item:nth-child(odd) {
  background: #ddd;
}

.box {
  background-color: red;
  width: 200px;
  height: 800px;
  margin: 0 auto;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<main>
  <div class="scroll-container text-center" id="overflow-scroll">
    <div class="scroll-item d-flex align-items-center justify-content-center lazyload">
      <div class="item-inner">
        <h1>Section 1</h1>
        <p>Lorem ipsum dolor</p>
      </div>
    </div>
    <div class="scroll-item d-flex align-items-center justify-content-center lazyload">
      <div class="item-inner">
        <h2>Section 2</h2>
        <p>Lorem ipsum howdy</p>
        <div class="box"></div>
        <p>
          long content end
        </p>
        <p>
          lorem ipsum dolor sit amet
        </p>
      </div>
    </div>
    <div class="scroll-item d-flex align-items-center justify-content-center lazyload">
      <div class="item-inner">
        <h2>Section 3</h2>
        <p>Long content</p>
      </div>
    </div>
    <div class="scroll-item d-flex align-items-center justify-content-center lazyload">
      <div class="item-inner">
        <h2>Section 4</h2>
        <p>Lorem ipsum howdy</p>
      </div>
    </div>

  </div>
</main>