css 滚动到另一节期刊

2ekbmq32  于 2023-03-20  发布在  其他
关注(0)|答案(1)|浏览(90)

你好,我有一个问题,我尝试了3个小时,使自动滚动到另一个部分时,底部部分的25%是可见的。

Section 1
Section 2 after 25% is visible
Auto scroll to section 2 100% screen size
对不起,我没有一个代码,我做了3个小时,因为没有工作所以我删除了一切:(
只有我拥有的

section{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
section:nth-child(1){
  color: #e0ffff;
  }
section:nth-child(2){
  color: #42455a;
  background: #e0ffff;
} 
section:nth-child(3){
  color: #e0ffff;
}
section:nth-child(4){
  color: #42455a;
  background: #e0ffff;
}
wrrgggsh

wrrgggsh1#

我认为关键是滚动快照

//html
<div id='globalSection'>
<section id='section1'>
</section>
<section id='section2'>
</section>
<section id='section3'>
</section>
</div>

//css
#globalSection{
  scroll-behavior: smooth;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

#globalSection section{
  display: flex;
  height: 100vh;
  scroll-snap-align: start;
  scroll-behavior: smooth;
}

相关问题