嵌套部分滚动 100vh

Question

我正在尝试做一个固定的部分，当您滚动它时，它开始在该部分内将内部文章滚动 100vh，就像有一个部分 100vh 的块，并将内部文章滚动 100vh：

HTML :

  <section class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis similique 
  expedita dolore, suscipit, 
  velit temporibus iusto ad, praesentium officia nemo nihil rerum necessitatibus excepturi 
  possimus 
   tempora maxime quam dolor culpa.</section>

<section id="process">
      <article><h1>THIS IS ARTICLE 1</h1></article>
      <article><h1>THIS IS ARTICLE 2</h1></article>
      <article><h1>THIS IS ARTICLE 3</h1></article>
      <article><h1>THIS IS ARTICLE 4</h1></article>
      <article><h1>THIS IS ARTICLE 5</h1></article>

</section>
    
<section class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis 
similique expedita dolore, suscipit, 
velit temporibus iusto ad, praesentium officia nemo nihil rerum necessitatibus excepturi 
possimus 
tempora maxime quam dolor culpa.</section>

CSS :

#process{
    width: 100%;
    position: relative;
    z-index: -1;
    background: black;
    color: white;
    font-size: 5rem;
    height: 100vh;

}
#process article{
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.lorem{
    width: 100%;
    height: 100vh;
    font-size: 3rem;
}

当您滚动到第 2 部分时，它会固定在屏幕上，当您仅滚动内部文章时，在阅读完文章后会在具有相同背景的部分内更改时，我想要做的就是转到第 3 部分，我该如何实现？那 ？

编辑 ：

像这样的东西

Answer 1

降低高度以获得更好的视野以及您对..的问题是什么？