Firefox下子元素设position:sticky时scroll-snap功能异常求助

首先纠正代码里的一处小错误：CSS中slide:nth-child(4n + 1)缺少类选择器的点，应该改为.slide:nth-child(4n + 1)，否则第一个幻灯片不会应用红色背景。

接下来针对Firefox中上滑scroll-snap失效的问题，根源在于Firefox对position: sticky元素与scroll-snap的协同处理逻辑和Chrome/Safari存在差异——当元素设置为sticky后，上滑时浏览器无法正确识别scroll-snap的锚点位置。

方案1：移除Sticky属性（推荐） #

如果核心需求是实现幻灯片的滚动吸附效果，scroll-snap本身已经可以满足，无需依赖position: sticky。修改后的CSS如下：

.slideshow-container {
  position: relative;
  overflow: scroll;
  height: 100vh;
  scroll-snap-type: y mandatory;
}

.slide {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: 100vh;
  width: 100%;
  /* 移除position: sticky和top: 0 */
}

.slide:nth-child(4n + 1) {
  background-color: red;
}

.slide:nth-child(4n + 2) {
  background-color: blue;
}

.slide:nth-child(4n + 3) {
  background-color: green;
}

.slide:nth-child(4n + 4) {
  background-color: yellow;
}

修改后所有浏览器（包括Firefox）的上下滑动scroll-snap都会正常工作。

方案2：保留Sticky的兼容写法（若需堆叠视觉效果） #

如果确实需要sticky带来的幻灯片堆叠效果，可以通过给容器添加额外占位高度修正Firefox的上滑问题：

.slideshow-container {
  position: relative;
  overflow: scroll;
  height: 100vh;
  scroll-snap-type: y mandatory;
  /* 添加与幻灯片高度一致的padding-bottom，确保滚动范围足够 */
  padding-bottom: 100vh;
  box-sizing: border-box;
}

.slide {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: 100vh;
  width: 100%;
  position: sticky;
  top: 0;
}

.slide:nth-child(4n + 1) {
  background-color: red;
}

.slide:nth-child(4n + 2) {
  background-color: blue;
}

.slide:nth-child(4n + 3) {
  background-color: green;
}

.slide:nth-child(4n + 4) {
  background-color: yellow;
}

原理是通过padding-bottom:100vh让滚动容器总高度覆盖所有sticky元素的锚点位置，确保Firefox上滑时能正确触发scroll-snap。

内容的提问来源于stack exchange，提问作者Svebor Sorić