嘿，我来帮你搞定这个需求！这里有两个可行的方案，一个是纯CSS极简方案（不用任何JS，推荐），另一个是修正后的Swiper实现（解决你之前用Swiper没成功的问题）。

方案一：纯CSS垂直滚动（简单易维护） #

这个方案不需要额外引入任何库，只需要给父容器设置合适的高度和溢出属性，就能自动实现超过5个元素时的垂直滑动。

步骤1：修改父容器.category的CSS #

给.category添加以下样式：

.category {
  max-height: 450px; /* 5个子元素的总高度：5*90px = 450px，可根据实际情况调整 */
  overflow-y: auto; /* 垂直方向溢出时显示滚动条 */
  display: flex;
  flex-direction: column; /* 确保子元素垂直排列 */
  gap: 0; /* 子元素之间的间距，按需调整 */
  /* 可选：美化滚动条，提升视觉体验 */
  scrollbar-width: thin; /* Firefox浏览器 */
  scrollbar-color: rgba(126,7,209,0.5) transparent; /* Firefox滚动条颜色 */
}

/* Webkit浏览器（Chrome/Safari等）自定义滚动条样式 */
.category::-webkit-scrollbar {
  width: 6px;
}
.category::-webkit-scrollbar-track {
  background: transparent;
}
.category::-webkit-scrollbar-thumb {
  background-color: rgba(126,7,209,0.5);
  border-radius: 3px;
}

步骤2：保持原有HTML结构不变 #

你的现有HTML不需要任何修改，直接使用即可。当子元素数量超过5个时，容器会自动出现垂直滚动条，用户可以上下滑动查看所有内容。

方案二：修正后的Swiper实现 #

如果你之前用Swiper没成功，大概率是没有配置垂直方向的滑动参数。以下是正确的实现步骤：

步骤1：调整HTML结构 #

把每个子元素包裹在.swiper-slide中，并添加Swiper的标准结构：

<div class="category swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide col-12 category_sibe" data-tooltip="SIBES" id="idSibe"></div>
    <div class="swiper-slide col-12 category_parc" data-tooltip="Parcs nationaux" id="idParc"></div>
    <div class="swiper-slide col-12 category_daya" data-tooltip="Dayas" id="idDaya"></div>
    <div class="swiper-slide col-12 category_faune" data-tooltip="Faune" id="idFaune"></div>
    <div class="swiper-slide col-12 category_daya" data-tooltip="Dayas" id="idDaya"></div>
    <div class="swiper-slide col-12 category_biotope" data-tooltip="Biotope" id="idBtp"></div>
  </div>
  <!-- 可选：添加可拖动的滚动条 -->
  <div class="swiper-scrollbar"></div>
</div>

步骤2：添加Swiper基础样式 #

确保你已引入Swiper的CSS文件，或者添加以下基础样式：

.swiper {
  height: 450px; /* 固定高度，刚好显示5个元素 */
}
.swiper-slide {
  box-sizing: border-box;
}

步骤3：初始化Swiper（正确配置垂直滑动） #

在JS中初始化Swiper时，必须设置direction: 'vertical'参数：

const swiper = new Swiper('.category', {
  direction: 'vertical', // 开启垂直滑动模式
  slidesPerView: 5, // 一次显示5个元素
  spaceBetween: 0, // 子元素之间的间距，按需调整
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true, // 允许用户拖动滚动条
  },
  // 可选：开启鼠标滚轮控制滑动
  mousewheel: true,
});

这样配置后，Swiper就能正常实现垂直滑动的效果了。

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