Scroll snapping鼠标滚动卡顿求助：scroll-behavior及JS方案均无效

我用CSS Scroll Snapping做了全屏分段滚动，触摸板滚动时流畅得很，但鼠标滚轮轻轻滚一下，页面要么卡顿要么直接跳去下一个分段，体验糟透了。试过scroll-behavior: smooth完全没用，纯JS实现又踩了一堆坑。

现有代码示例 #

HTML

<div class="scroll-container">
  <div class="scroll-area">1</div>
  <div class="scroll-area">2</div>
  <div class="scroll-area">3</div>
  <div class="scroll-area">4</div>
</div>

CSS

.scroll-container {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  height: 100vh;
  overflow-y: scroll;
  scrollbar-width: none;
}

.scroll-area {
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: red;
}

.scroll-area:nth-child(1) { background-color: red; }
.scroll-area:nth-child(2) { background-color: blue; }
.scroll-area:nth-child(3) { background-color: green; }
.scroll-area:nth-child(4) { background-color: black; }

有效解决方案：JS+CSS结合控制鼠标滚动 #

核心就是拦截鼠标滚轮的默认行为，把生硬的跳段改成平滑过渡，同时保留触摸板等其他交互的原生流畅性。

修改后的完整代码

CSS

.scroll-container {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  height: 100vh;
  overflow-y: scroll;
  scrollbar-width: none;
  scroll-snap-stop: always; /* 防止滚动时的闪烁 */
}

.scroll-area {
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.scroll-area:nth-child(1) { background-color: red; }
.scroll-area:nth-child(2) { background-color: blue; }
.scroll-area:nth-child(3) { background-color: green; }
.scroll-area:nth-child(4) { background-color: black; }

HTML

<div class="scroll-container" id="scrollContainer">
  <div class="scroll-area">1</div>
  <div class="scroll-area">2</div>
  <div class="scroll-area">3</div>
  <div class="scroll-area">4</div>
</div>

JavaScript

const scrollContainer = document.getElementById('scrollContainer');
let isScrolling = false;

// 拦截鼠标滚轮事件
scrollContainer.addEventListener('wheel', (e) => {
  e.preventDefault();
  
  // 防抖：避免连续滚动触发多次
  if (isScrolling) return;
  isScrolling = true;
  
  // 判断滚动方向，计算目标位置
  const scrollDirection = e.deltaY > 0 ? 1 : -1;
  const targetTop = scrollContainer.scrollTop + scrollDirection * window.innerHeight;
  
  // 平滑滚动到目标分段
  scrollContainer.scrollTo({
    top: targetTop,
    behavior: 'smooth'
  });
  
  // 滚动结束后解除锁定，时长匹配smooth动画
  setTimeout(() => {
    isScrolling = false;
  }, 800);
});

为什么这个方案有效？

• 阻止了鼠标滚轮触发的原生强制snap，换成我们自己控制的平滑滚动
• 保留了CSS Scroll Snap的设置，触摸板、键盘上下键、拖拽滚动条这些交互依然正常工作
• 防抖机制避免了连续滚动时的冲突，保证每次只处理一次滚动请求

轻量替代方案：降低Snap严格度 #

如果不想加JS，可以试试把scroll-snap-type: y mandatory改成scroll-snap-type: y proximity。这种设置下，只有当滚动距离接近分段边缘时才会触发snap，鼠标轻微滚动不会强制跳段。但缺点是交互精度不如JS方案，适合对体验要求不高的场景。

内容的提问来源于stack exchange，提问作者Utsav Raithatha