使用CSS的scroll-snap属性可快速实现分页滚动，配合JavaScript能精确控制翻页行为并添加分页指示器提升交互体验。
要实现HTML滚动条的分页式滚动效果，也就是让用户滚动时内容像翻页一样整页切换，而不是平滑连续滚动，可以通过CSS和JavaScript结合来控制。下面介绍几种实用方法。
1. 使用 scroll-snap 实现分页滚动
scroll-snap 是CSS中专门用于创建分页滚动体验的属性，适合在垂直或水平滚动容器中让子元素自动“吸附”到视口边缘。
常用场景：全屏轮播、页面式导航、展示页切换。示例代码：
第一页 第二页 第三页
CSS样式：
.container {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
.section {
height: 100vh;
scroll-snap-align: start;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
说明：
- scroll-snap-type: y mandatory 表示垂直方向强制吸附
- scroll-snap-align: start 让每个 section 的顶部对齐容器顶部
- 容器必须设置固定高度并开启滚动（overflow）
2. JavaScript 控制滚动位置模拟翻页
如果需要更精确控制，比如响应键盘、触摸或按钮翻页，可以用JavaScript监听滚动事件，并将滚动位置对齐到页面高度的倍数。
示例逻辑：
const container = document.querySelector('.container');
let isScrolling = false;
container.addEventListener('wheel', (e) => {
if (isScrolling) return;
e.preventDefault();
const direction = e.deltaY > 0 ? 1 : -1;
const pageHeight = window.innerHeight;
const currentPage = Math.round(container.scrollTop / pageHeight);
isScrolling = true;
container.scrollTo({
top: (currentPage + direction) * pageHeight,
behavior: 'smooth'
});
setTimeout(() => {
isScrolling = false;
}, 800); // 与CSS动画时间匹配
});
这种方法可以自定义翻页逻辑，支持键盘上下键、触摸板等操作。
3. 添加分页指示器提升体验
配合分页滚动，可添加小圆点或数字指示当前页，增强用户感知。
通过监听 scroll 事件计算当前页：
container.addEventListener('scroll', () => {
const pageHeight = window.innerHeight;
const currentPage = Math.round(container.scrollTop / pageHeight);
// 更新指示器高亮
document.querySelectorAll('.dot').forEach((dot, index) => {
dot.classList.toggle('active', index === currentPage);
});
});
基本上就这些。用 scroll-snap 能快速
实现标准分页滚动，加JS可做更复杂交互。关键是控制好容器高度、滚动行为和对齐方式。不复杂但容易忽略细节。
