求助：Firefox中scroll-snap功能卡顿问题的解决办法

云原生阿岚

2026-7-13

演示

JSFiddle
YouTube bug(?)演示视频

JSFiddle代码

HTML

<!doctype html>
<head>
  <title>Why doesn't this work right in Firefox?</title>
</head>
<body>
  <section>
    <div><h1>1</h1></div>
    <div><h1>2</h1></div>
    <div><h1>3</h1></div>
    <div><h1>4</h1></div>
    <div><h1>5</h1></div>
  </section>
</body>

CSS

section {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

div {
  width: 100%;
  height: 100vh;
  scroll-snap-stop: always;
  scroll-snap-align: center;
  overflow: hidden;
}

h1 {
  line-height: 100vh;
  font-size: 100vh;
  text-align: center;
  padding: 0;
  margin: 0;
}

div:nth-of-type(1) {
  background-color: #FF0000;
}

div:nth-of-type(2) {
  background-color: #00FF00;
}

div:nth-of-type(3) {
  background-color: #0000FF;
}

div:nth-of-type(4) {
  background-color: #00FFFF;
}

div:nth-of-type(5) {
  background-color: #FF00FF;
}

问题描述

我尝试实现一个简单的scroll-snap轮播，但无论采取何种调整，Firefox总会逐渐变慢，甚至在过渡过程中途停顿，滚动速度远慢于禁用scroll-snap时的状态。

安卓版Firefox同样存在性能问题：虽不会在过渡中途停顿，但有时需要两次滑动才能触发响应。

我已搜索Stack Overflow相关问题，但未找到与我遇到的情况完全匹配的内容，这让我怀疑可能是硬件特定问题，但该问题仅在Firefox中出现，Chrome无此现象。

我尝试用性能分析器进行排查。

测试环境

Dell XPS-15 9560
- Linux Mint 21.2（Cinnamon 64位）
- 同一设备的Windows 11系统中也出现该问题
  - 已卸载，无法获取版本信息
  - Firefox版本116.0.2（64位）
Samsung Galaxy S21 5G
- Android 13
- Firefox 116.2.0

性能分析结果

我放大查看了两次卡顿实例，未发现明显异常，但或许经验更丰富的开发者能看出问题所在。这是与YouTube演示不同的一次测试，但表现出的问题一致。