网页滚轮翻页视觉效果指的是用户滚动鼠标滚轮时，页面不是连续平滑滚动，而是以整页为单位进行切换，每滚动一次就切换到下一页或上一页内容，这种效果在官网、产品展示页中应用十分广泛。
核心实现原理
实现该效果的核心逻辑分为三个部分：首先是监听鼠标滚轮的滚动事件，获取滚动方向和滚动动作；其次是控制页面的滚动行为，阻止默认的连续滚动，改为按整页切换；最后是通过CSS动画让页面切换过程更流畅，避免生硬的跳转。
1. 监听滚轮事件
浏览器提供了wheel事件用于监听鼠标滚轮操作，我们可以通过该事件获取滚轮的滚动方向，判断用户是向上滚动还是向下滚动。
// 监听wheel事件
document.addEventListener('wheel', function(e) {
// 阻止默认滚动行为
e.preventDefault();
// 判断滚动方向，deltaY大于0为向下滚动，小于0为向上滚动
if (e.deltaY > 0) {
console.log('向下滚动，切换到下一页');
} else {
console.log('向上滚动，切换到上一页');
}
}, { passive: false });
这里需要注意，添加事件监听时设置{ passive: false }，才能成功阻止默认的滚动行为，否则浏览器会忽略preventDefault方法的调用。
2. 控制页面滚动状态
为了避免用户快速滚动滚轮导致页面连续切换多次，我们需要添加一个滚动锁，确保在一次切换动画完成前，不响应新的滚轮事件。
// 滚动锁，防止连续触发
let isScrolling = false;
// 当前页码，默认第一页
let currentPage = 0;
// 总页数，假设页面有3个整页内容
const totalPages = 3;
// 每页的高度，这里取窗口可视高度
const pageHeight = window.innerHeight;
document.addEventListener('wheel', function(e) {
e.preventDefault();
// 如果正在滚动中，直接返回，不处理新的滚动事件
if (isScrolling) return;
// 设置滚动锁为true
isScrolling = true;
if (e.deltaY > 0) {
// 向下滚动，页码加1，不超过总页数减1
currentPage = Math.min(currentPage + 1, totalPages - 1);
} else {
// 向上滚动，页码减1，不小于0
currentPage = Math.max(currentPage - 1, 0);
}
// 调用切换页面方法
switchPage(currentPage);
}, { passive: false });
// 切换页面的方法
function switchPage(pageIndex) {
// 计算需要滚动的距离
const scrollTop = pageIndex * pageHeight;
// 使用window.scrollTo实现滚动，behavior设为smooth实现平滑效果
window.scrollTo({
top: scrollTop,
behavior: 'smooth'
});
// 动画完成后解除滚动锁，这里设置和CSS动画时长一致
setTimeout(() => {
isScrolling = false;
}, 500);
}
3. 配合CSS优化效果
我们可以给页面内容添加CSS样式，让每一页内容占满整个可视区域，同时给滚动过程添加过渡效果，让切换更自然。
/* 重置默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
/* 隐藏默认滚动条 */
overflow: hidden;
height: 100%;
}
/* 每一页的样式，占满整个可视区域 */
.page {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 32px;
color: #fff;
}
/* 不同页面的背景色区分 */
.page:nth-child(1) {
background-color: #409eff;
}
.page:nth-child(2) {
background-color: #67c23a;
}
.page:nth-child(3) {
background-color: #e6a23c;
}
对应的HTML结构如下，每个div标签对应一页内容：
<div class="page">第一页内容</div> <div class="page">第二页内容</div> <div class="page">第三页内容</div>
兼容与优化建议
- 不同浏览器的滚轮事件参数可能存在差异，部分旧版本浏览器可能不支持
wheel事件，可额外兼容mousewheel事件。 - 如果页面内容高度不固定，需要动态计算每一页的实际高度，而不是统一使用窗口可视高度。
- 移动端没有鼠标滚轮，可额外监听
touchstart、touchmove、touchend事件，实现触摸滑动翻页的效果，保持交互统一。 - 滚动锁的时长需要和CSS动画时长、
scrollTo的smooth动画时长保持一致，避免出现动画未完成就响应新滚动的问题。
常见问题解决
如果遇到滚动事件不生效的问题，首先检查是否设置了{ passive: false }，其次检查是否有其他元素阻止了事件冒泡。如果页面切换时出现跳动，可检查scrollTop的计算是否正确，是否和页面实际的布局高度匹配。
滚轮翻页JavaScriptscroll事件CSS动画修改时间：2026-07-10 00:03:25