【CSS】overscroll-behavior プロパティでスクロール制御

  <div class="container">
    <section class="section "></section>
    <section class="section "></section>
    <section class="section "></section>
    <section class="section "></section>

    <div class="modal">
      <div class="modal-content">
        <p>コンテンツコンテンツコンテンツ</p>
        <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p>
        <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p>
        <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p>
        <p>コンテンツコンテンツコンテンツコンテンツコンテンツ</p>
        <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p>
        <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p>
        <p>コンテンツコンテンツコンテンツコンテンツコンテンツ</p>
        <p>コンテンツコンテンツコンテンツ</p>
        <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p>
        <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p>
        <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p>
        <p>コンテンツコンテンツコンテンツコンテンツコンテンツ</p>
        <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p>
        <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p>
        <p>コンテンツコンテンツコンテンツコンテンツコンテンツ</p>
      </div>
    </div>
  </div>

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    height: 50vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: #fff;
    font-size: 24px;
    overflow-y: auto;
}

.section {
    width: 100%;
    height: 500px;
}

.section:nth-child(odd) {
    background-color: #f0f0f0;
}
.section:nth-child(even) {
    background-color: orange;
}