如何使用CSS scroll-snap实现单次滚动跨越4个或多个容器项

该效果完全可以实现，不需要编写任何JavaScript代码，核心是通过调整CSS滚动捕捉（scroll-snap）的吸附点位置来达成需求。

核心原理 #

你当前的代码给每个.box都设置了scroll-snap-align: start，滚动时浏览器会自动吸附到离停止位置最近的单个box，所以每次滚动只会跨越1个项目。要实现单次滚动跨越4个项目，只需要把吸附点从单个box，转移到每4个box组成的分组容器上即可。

具体实现代码 #

CSS部分 #

.scrollers {
  width: 100%;
  /* 可视区宽度匹配4个box+对应间距的总宽度 */
  max-width: calc((150px + 3rem) * 4 - 3rem);
  height: 150px;
  margin: 0 auto;
  scroll-snap-type: x mandatory;
  display: flex;
  gap: 0;
  overflow-y: hidden;
  overflow-x: scroll;
  border: 1px solid black;
  box-sizing: border-box;
}

/* 滚动分组，每4个box为一个吸附单元 */
.scroll-group {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  gap: 3rem;
  /* 仅在分组上设置吸附点 */
  scroll-snap-align: start;
}

.scrollers .box {
  width: 150px;
  height: 150px;
  aspect-ratio: 1/1;
  background-color: red;
  border: 1px solid black;
  /* 移除单个box上的scroll-snap-align属性，避免单项目吸附 */
}

HTML结构调整 #

<div class="scrollers multiple">
  <div class="scroll-group">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="scroll-group">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <!-- 后续内容按每4个box一组的规则追加即可 -->
</div>

注意事项 #

• 不调整DOM结构的前提下，仅靠现有CSS属性无法实现该效果：目前CSS scroll-snap规范没有提供“跳过N个吸附点”的配置项，必须通过调整吸附点的挂载位置实现跨项滚动
• 该方案兼容所有支持CSS Scroll Snap模块的现代浏览器，滚动触发（鼠标滚轮、触控板滑动、触屏拖拽）时都会自动整组跨越，单次滚动刚好定位到下一组4个项目的起始位置

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