实现分屏滚动效果的关键是使用 CSS 中的 overflow: hidden 和 overflow-y: scroll 属性来控制页面的滚动。具体步骤如下：
1.首先，在 HTML 中创建多个 section 标签，每个标签代表一个屏幕。
<body>
<section class="screen1"></section>
<section class="screen2"></section>
<section class="screen3"></section>
...
</body>2.然后，使用 CSS 设置每个 section 的高度为视口高度，并将 body 和 html 的高度也设置为 100%。
body, html {
height: 100%;
}
section {
height: 100vh;
}3.接着，使用 display: flex 属性将所有 section 水平排列，并将 body 的 overflow 属性设置为 hidden，以隐藏超出视口范围的内容。
body {
overflow: hidden;
}
body {
display: flex;
flex-direction: column;
}4.最后，为第一个 section 以外的每个 section 添加 scroll-snap-align: start 属性，以在滚动时自动将屏幕对齐到屏幕的顶部。
section:not(:first-of-type) {
scroll-snap-align: start;
}通过以上步骤，就可以实现分屏滚动效果。需要注意的是，这种方法需要浏览器支持 CSS 属性 scroll-snap-type 和 scroll-snap-align，所以在使用时需要考虑浏览器兼容性。
