嵌套部分滚动 100vh

Question

i am trying to do a section that is fixed when you scroll it start to scroll the inner articles by 100vh inside the section like having aa block of section 100vh , and scroll the inner articles by 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;
}

all i want to do when you scroll into the 2nd section it goes fixed in the screen and when you scroll only the inner articles change inside the section with the same background after finish reading the articles it goes to the 3rd section , how can i achieve that ?

EDIT :

something like this

Answer 1

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