Прокрутка страницы для остановки на определенном c Div

Question

У меня есть страница с горизонтальной прокруткой div в середине страницы. Этот div имеет 3 раздела, каждый из которых по всей ширине экрана. Когда пользователь начинает прокручивать этот раздел, я хочу, чтобы экран перестал гулять, когда следующий раздел полностью виден. Другими словами, на рисунке ниже показан первый вид, и пользователь начинает горизонтальную прокрутку на синем элементе div, экран перестает прокручиваться, как только красная часть полностью появляется на экране

Приложение:

    return (
      <div className={style.app}>
      <div className={style.pageOne}>
        <div className={style.mobileHeader}> 
          <div className={style.logoBox}>
            Logo Here
          </div>
          <div className={style.contactBox}>
          <a className={style.phoneNumberLink} href="tel:+900300400">Contact Us<br></br> 900 300 400</a>
          </div>
        </div>
        <div className={style.mainContent}>
           <div className={style.contentOne}></div>
           <div className={style.contentTwo}></div>
           <div className={style.contentThree}></div>
        </div>
        </div>
      </div>
    );

CSS:

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
}

.app {
    background-color: green;
    background-size : cover;
    /* background-attachment: fixed; */
    height: 100vh;
    /* width: 100vw; */
    /* display: flex;
    flex-direction: column; */
    /* overflow: hidden;  */
    position: fixed;
}
.pageOne {
    height: 100vh;
    width: 100vw;
}

.contactBox {
    margin: 1rem;
    padding: 1rem;
}

.contentOne {
    background-color: blue;
    display: inline-block;
    height: 19rem;
    width: 100vw;
    /* overflow-x: auto; */
}
.contentTwo {
    background-color: red;
    display: inline-block;
    height: 19rem;
    width: 100vw
}
.contentThree {
    background-color: yellow;
    display: inline-block;
    height: 19rem;
    width: 100vw
}

.logoBox {
    border: 2px solid white;
    margin: 1rem;
    padding: 2rem;
}

.mainContent {
    margin-top: 4rem;
    height: 20rem;
    overflow: auto;
    white-space: nowrap;

}

.mobileHeader {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.phoneNumberLink {
    color: white;
    font-size: 1.2rem;
    text-decoration: none;
}