css transition 滚动翻页

可以使用CSS中的scroll-snap-type和scroll-snap-align属性来实现滚动翻页效果，再配合transition属性添加动画效果。

具体实现步骤如下：
1. 设置外层容器的overflow为scroll，并添加scroll-snap-type：y mandatory属性。
2. 设置内层容器的宽度为100%，高度为100vh，并添加scroll-snap-align：start属性。
3. 使用JavaScript监听滚动事件，判断当前位置是否处于页面的中间部分，并通过修改外层容器的scrollTop值来实现翻页效果。
4. 使用transition属性为外层容器的scrollTop值添加动画效果。

示例代码如下：

<div class="container">
  <div class="page">Page 1</div>
  <div class="page">Page 2</div>
  <div class="page">Page 3</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  scroll-snap-type: y mandatory;
}

.page {
  width: 100%;
  height: 100vh;
  scroll-snap-align: start;
}

.container {
  transition: all 0.5s ease-in-out;
}

const container = document.querySelector('.container');

container.addEventListener('scroll', () => {
  const currentPage = Math.round(container.scrollTop / document.documentElement.clientHeight);
  container.scrollTop = currentPage * document.documentElement.clientHeight;
});