本文介绍如何通过原生 javascript 和 css 实现“整屏分段滚动”效果：用户滚动鼠标时，页面自动平滑跳转至下一个或上一个全屏高度的 section，确保每个区块完整呈现，兼容鼠标滚轮、触控板及 macos 设备。
本文介绍如何通过原生 javascript 和 css 实现“整屏分段滚动”效果：用户滚动鼠标时，页面自动平滑跳转至下一个或上一个全屏高度的 section，确保每个区块完整呈现，兼容鼠标滚轮、触控板及 macos 设备。
要实现「滚动一次仅切换一个完整区块」的效果（也称“垂直分页滚动”或 “fullpage-style scroll”），核心思路是：拦截原生滚动行为，将其转化为对目标 section 的精确锚点定位。这不仅提升了浏览引导性，还避免了用户因快速滚动而跳过关键内容。
✅ 基础 HTML 结构
确保每个 .sections 元素占据 100% 视口高度，并包裹在容器中：
<div class="container"> <div class="sections" id="sectionOne"><p class="section-text">DIV 1</p></div> <div class="sections" id="sectionTwo"><p class="section-text">DIV 2</p></div> <div class="sections" id="sectionThree"><p class="section-text">DIV 3</p></div> <div class="sections" id="sectionFour"><p class="section-text">DIV 4</p></div> </div>
? 必需的 CSS 样式
关键点在于禁用默认文档滚动、固定视口高度，并为每节设置 100vh 高度：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden; /* 隐藏全局滚动条，由 JS 控制 */
height: 100vh;
}
.container {
height: 400vh; /* 总高度 = 4 sections × 100vh，确保 DOM 布局完整 */
}
.sections {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
scroll-snap-align: start; /* 可选：增强原生 scroll-snap 支持 */
}? 提示：
scroll-snap-type: y mandatory可作为轻量级备选方案（需配合scroll-snap-align: start），但本方案采用 JS 主控，兼容性更广、控制更精准。
⚙️ 核心 JavaScript 逻辑
以下代码实现：
- 自动识别滚动方向（向上/向下）；
- 限制滚动范围（首尾不可越界）；
- 平滑滚动至对应 section 顶部；
- 兼容 Chrome/Firefox/Safari（含 macOS 触控板和 Magic Mouse）；
let currentSection = 0;
const sections = document.querySelectorAll('.sections');
const totalSections = sections.length;
function handleScroll(event) {
// 统一标准化滚动增量（适配 wheelDelta / deltaY / detail）
const delta = event.wheelDelta || -event.deltaY || -event.detail;
if (delta > 0 && currentSection > 0) {
currentSection--;
} else if (delta < 0 && currentSection < totalSections - 1) {
currentSection++;
}
scrollToSection(currentSection);
}
function scrollToSection(index) {
const target = sections[index];
window.scrollTo({
top: target.offsetTop,
behavior: 'smooth'
});
}
// 防止多次快速触发导致状态错乱，可添加节流（推荐用于生产环境）
let isScrolling = false;
document.addEventListener('wheel', function (e) {
if (isScrolling) return;
isScrolling = true;
handleScroll(e);
setTimeout(() => {
isScrolling = false;
}, 300);
});⚠️ 注意事项与优化建议
-
移动端兼容性：上述方案主要面向桌面端。如需支持触摸滑动（iOS/Android），需额外监听
touchstart/touchmove/touchend并计算位移差，或引入hammer.js等手势库。 -
无障碍访问：建议为每个 section 添加
tabindex="-1"并配合aria-label，确保键盘用户可通过Tab+Enter跳转。 -
性能优化：若 section 数量较多（>10），可结合
IntersectionObserver动态加载内容，避免首屏渲染压力。 - SEO 友好性：所有内容仍保留在 DOM 中，搜索引擎可正常索引，无需担心单页应用（SPA）常见 SEO 问题。
通过以上实现，你将获得一种简洁、稳定、跨平台一致的整屏滚动体验——既满足视觉节奏感，又保障信息传达完整性。
