时间戳

首页 > 解决方案 > 嵌套部分滚动 100vh

javascript - 嵌套部分滚动 100vh

问题描述

我正在尝试做一个固定的部分，当您滚动它时，它开始在该部分内将内部文章滚动 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;
}

当您滚动到第二部分时，我想做的就是它固定在屏幕上，当您滚动只有内部文章在阅读完文章后在相同背景的部分内发生变化时，它会进入第三部分，我该如何实现那 ？

编辑 ：

像这样的东西

标签： javascripthtmlcss

解决方案

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

推荐阅读