如何在javascript中创建逐页滚动？

Question

我想创建一个在每个滚动页面上滚动 100vh 的页面

使用scrollTo和scrollBy效果不佳。

我通过以下方式计算屏幕的垂直高度：

const [vh,setVh ]=useState(Math.round(window.innerHeight / (100/100)))

并使用scroll addEventListener在页面上进行滚动并更新vh量。

window.addEventListener("scroll",()=>{
 window.scrollTo(vh,vh) ;
setVh(vh+vh) 
})

Answer 1

这可以使用纯 css 和 scroll-snap 来完成（如上面 Reyno 的评论中所述）：

body {
  margin: 0;
}

.container {
  height: 100%;
  position: fixed;
  width: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  outline: 0.5px solid black;
}

.container>div {
  height: 100%;
  scroll-snap-align: center;
  text-align: center;
}

<div class="container">
  <div>1st</div>
  <div>2nd</div>
  <div>3rd</div>
  <div>4th</div>
  <div>5th</div>
</div>